Question

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

我尝试使用字符串，但是没有用

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

value = {{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 })}
      />
      )
  })
}

问题在于值和onChange

我希望值= {this.state.label1} 值= {this.state.label2}

onChange = {e => this.setState（{label1：e.target.value}）} onChange = {e => this.setState（{label2：e.target.value}）}

我知道了值= [对象对象] .label1 值= [对象对象] .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]}

如何在响应中使用“ this.props”连接json中的数据

2 个答案: