javascript - 在.map函数react中使用变量

Question

我是一名新 react 者。我在使用 map 和变量时遇到问题，你能帮助我吗？ 我不知道如何在 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>

我想做这样的

<Grid item xs={12} sm={6} key={1}>
                <TextField
                  required
                  id={1}
                  name={"name"}
                  label={"닉네임"}
                  value={name.value}
                  onChange={name.onChange}
                  fullWidth
                />
              </Grid>

Answer 1

如果您想为每个文本字段设置值。

1. 为每个文本字段定义一个状态变量(使用每个文本字段的名称)并绑定(bind)一个 on-change 事件。
2. 在 on-change 中绑定(bind) this 并获取名称和值，基于 on-change 将值设置为每个文本字段的名称状态
3. 现在将状态传递到每个文本字段。

您应该了解 React 和 on-change 事件中的状态 props。

例如

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>
    );
}

}