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

这个（未经测试的）

怎么样？

＆＃13;

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

＆＃13;

如何在react中声明动态状态值

2 个答案: