如何在反应中声明动态状态值

Question

我在循环中创建文本输入。

loop... {
    return <TextInput value={this.state.WHAT-TO-USE-HERE} />
}

如您所见，我不知道如何动态设置文本输入的状态？

在JSX中，我有：

render() { ...
  list.map((item, index) => {
   return this.createTextInput(item);
...

创建输入的函数：

createTextInput(item) {
  return (
    <TextInput value={this.state.XYZ} ... />
  )
}

Answer 1

您可以执行以下操作：

const dynamicVar = 'test';
loop... {
    return <TextInput value={this.state[dynamicVar]} />
}

编辑：由于您的问题更清晰，这是更新的答案

您应该在输入中This is a test作为值。

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        {list.map((item, index) => (
          <TextInput
            value = { this.state[item.id] }
            onChange = {(event) => this.setState({ [item.id]: event.target.value })}
          />
        )}
      </div>
    )
  }
}

这有意义还是您需要更多详细信息？

Answer 2

这个

怎么样（未经测试）

state={ change: {} }
handleChange = idx => {
this.setState(change[idx]: e.target.value )
}
loop... {
    return <TextInput onChange={()=> handleChange(idx)} value={this.state.change.idx} />
}