Entrée de la fosse ANTD onChange

    Tout d'abord, parler de la valeur de l'entrée des besoins numériques trois boîtes d'entrée, veulent à additionner et soustraire automatiquement, puis copié dans une quatrième zone de saisie

 

Un exemple très simple, avait voulu combiner avec onChange getFieldValue pour l'utiliser seulement pour trouver que ce soit-onChange onChange

 

code html

1 <type Row = {type 'flex'} = {{width: '100%'}} align = "middle">
 2            <span Col = {17}>
 3              <FormItem label = "一号"
 4                style = { {display: 'flex' }}
 5                {...} formItemLayout
 6                = requis { true }
 7              >
 8                {form.getFieldDecorator ( 'un' , config) (
 9                  <espace réservé d'entrée = "un" onChange = {onChange} / >
 10                )}
 11              </ FormItem>
12            </ Col>
 13          </ Row>
14          <type Row = {type 'flex'} = {{width: '100%'}} align = "middle">
 15            <span Col = {17}>
 16              <label FormItem = "二号"
 17                style = { {display: 'flex' }}
 18                {...} formItemLayout
 19                = {requis vrai }
 20              >
 21                {form.getFieldDecorator ( 'deux' , config) (
 22                  <espace réservé d'entrée = "deux" onChange = {} onChange / >
 23                )}
 24              </ FormItem>
25            </ Col>
 26         </ Row>
 27          <type = ligne de style { 'flex'} = {{width: '100%'}} align = "middle">
 28            <span Col = {17}>
 29              <label FormItem = "三号"
 30                style = {{display: 'flex' }}
 31                {...} formItemLayout
 32                = {requis vrai }
 33              >
 34                {form.getFieldDecorator ( 'trois' , config) (
 35                  <= InputNumber espace réservé "trois" onChange = {} onChange />
 36                )}
 37              <
/ FormItem> 38           </ Col>
 39          </ Row>
 40          <type Row = modèle { 'flex'} = {{width: '100%'}} align = "middle">
 41            <span Col = {17}>
 42              <label FormItem = "总数"
 43                style = {{display: 'flex' }}
 44                {...} formItemLayout
 45                requis = { true }
 46              >
 47                {form.getFieldDecorator ( 'somme' , config) (
 48                  <espace réservé d'entrée = » somme »/>
49                )}
 50              </ FormItem>
 51           </ Col>
 52          </ Row>

Afficher le code

 

js

la onChange = const (E) => { 
    const = form.getFieldValue One ( "One") 
    const = form.getFieldValue DEUX ( "DEUX") 
    const = form.getFieldValue Trois ( "Trois") 
    le console.log (un, deux, trois, « Un , deux , trois »); 
  } 


// a ce stade , vous ne trouverez pas les mises à jour en temps réel raison est que lorsque vous changez de façon dynamique la valeur de la structure de dom n'a pas mis à jour en temps réel sur, alors que la deuxième fois que vous déclenchez cette fonction lorsque atteindra la dernière valeur 

// alors vous devez obtenir comment le faire de sorte que vous pouvez obtenir à deux idées 

// Tout d' abord, votre impression dans un simple et minuteries brut peut se passer 
// le second est le cette fonction est conditionnée en fonction asynchrone est également disponible pour 


// afin que nous puissions voir sont relativement bien si ANTD vous offre e but est de vous permettre d' utiliser la e.target.value d'entrée en cours pour obtenir plutôt que d' obtenir l'getFieldValue d'entrée en cours valeur 

// voit donc que toutes les valeurs de la onSubmit est une méthode asynchrone , vous pouvez entrer acquise