如何在反应中将来自json的数据与“this.props”连接起来

Question

我正在尝试通过数据 json 动态创建文本字段，当我想为每个字段设置一个值和 onChange 函数时会出现问题。

我尝试使用字符串但我没有工作

值={${this.state}.+ ${textfield.label}}

值={this.state.${textfield.label}}

 this.state = {     
  label1: "",
  label2 : ""     
};

}

{textfields.map((textfield) => {
return(
      <TextField
      key={textfield.label}
      label={textfield.name}
      margin="normal"
      fullWidth
      id={textfield.label}
      required
      value={`${this.state}.`+ `${textfield.label}`}
      onChange={e => this.setState({ `${textfield.label}` : e.target.value })}
      />
      )
  })
}

问题在于 value 和 onChange

我期待 值={this.state.label1} 值={this.state.label2}

onChange={e => this.setState({ label1 : e.target.value })} onChange={e => this.setState({ label2 : e.target.value })}

我得到了 值=[对象对象].label1 value=[object Object].label2

或 value="this.state.label1" 但作为 texfield 中的字符串 value="this.state.label1" 但在 texfield 中作为字符串

onChange 显示语法错误

Answer 1

你能像这样给它起个名字吗？

{textfields.map((textfield) => {

return(
      <TextField
      key={textfield.label}
      label={textfield.name}
      margin="normal"
      fullWidth
      id={textfield.label}
      required
    name={textfield.label}
      value={`${this.state}.`+ `${textfield.label}`}
      onChange={e => this.setState({ `e.target.name` : e.target.value })}
      />
      )
  })
}

Answer 2

只需在花括号内使用纯 JavaScript。像这样：

 value={this.state[textfield.label]}