Je suis un nouveau réactif. J'ai un problème lorsque j'utilise une carte et des variables, pourriez-vous m'aider? je ne sais pas comment entrer les variables dans des options comme value = {name.value}

const info = [
  { key: "닉네임", value: "name" },
  { key: "지역", value: "area" },
  { key: "생일", value: "birthday" },
  { key: "키", value: "tall" },
  { key: "몸매", value: "body" },
  { key: "직업", value: "job" },
  { key: "회사", value: "company" },
  { key: "학교", value: "school" },
  { key: "학력", value: "background" },
  { key: "종교", value: "religion" },
  { key: "흡연", value: "smoking" },
  { key: "카카오 아이디", value: "kakaoid" }
];

<Grid container spacing={3}>
            {info.map((info, index) => (
              <Grid item xs={12} sm={6} key={index}>
                <TextField
                  required
                  id={index}
                  name={info.value}
                  label={info.key}
                  value={}
                  onChange={}
                  fullWidth
                />
              </Grid>
            ))}
          </Grid>

Je veux faire comme ça

<Grid item xs={12} sm={6} key={1}>
                <TextField
                  required
                  id={1}
                  name={"name"}
                  label={"닉네임"}
                  value={name.value}
                  onChange={name.onChange}
                  fullWidth
                />
              </Grid>
1
박형렬 8 nov. 2019 à 16:35

1 réponse

Si vous souhaitez définir la valeur de chaque champ de texte.

  1. Définissez une variable d'état pour chacun des champs de texte (utilisez le nom de chaque champ de texte) et liez un événement en cours de modification.
  2. En cas de changement, liez un ceci et obtenez le nom et la valeur, en fonction du changement, définissez la valeur sur l'état du nom pour chaque champ de texte
  3. Passez maintenant l'état à chacun des champs de texte.

Vous devez connaître l'état des accessoires dans les événements réactifs et en cours de modification.

Par exemple

constructor(props){
    super(props);
    this.state = {
        value:''
    }
}

inputchange = (event) =>{
    this.setState({
        value:event.target.value
    })
}

render(){
    return (
        <div className="todolist">
            <input type="text" value={this.state.value} onChange={this.inputchange}/>
            <input type="button" value="Submit" onClick={this.props.handleclick.bind(this,this.state.value)}/>
        </div>
    );
}

}

0
Jerrin stephen 8 nov. 2019 à 13:54