React管理表单输入绑定到动态状态名称

时间:2019-10-04 02:42:43

标签: javascript reactjs

我正在调用一个api,然后根据结果动态创建许多状态变量。我还使用了动态引用的值作为输入值。我不认为这些值在同步...提供的示例的输入值为'0'。我可以正确接线吗?

initializeInputs() {
var outerState = this;
this.state.data.forEach(function(element) {
  //console.log(element);
  var stateTitle = "title" + element.id;
  var stateLocation = "location" + element.id;
  var stateDescription = "description" + element.id;
  var stateStartDate = "startdate" + element.id;
  var stateEndDate = "enddate" + element.id;
  outerState.setState({ [stateTitle]: element.title });
  outerState.setState({ [stateLocation]: element.location });
  outerState.setState({ [stateDescription]: element.description 
});
  outerState.setState({ [stateStartDate]: element.startdate });
  outerState.setState({ [stateEndDate]: element.enddate });
});
}

{data.length <= 0
? 'NO DB ENTRIES YET'
: data.map((dat) => (
    <input className={"event-title-input event-input event-main-input input"+dat.id} name={"title"+dat.id} value={this.state.title+dat.id} onChange={this.handleChange} style={{ display: 'none' }} />)
)}

1 个答案:

答案 0 :(得分:0)

通过使用括号符号表示动态键名,可以正确地将状态设置为状态,但不能以相同的方式访问它们。试试:

value={this.state[title + dat.id]}