ReactJS 中动态生成的输入文本字段值设置问题

Question

我在 Reactjs 中动态生成了文本字段。输入文本字段被视为单独的组件。当我尝试在动态生成的文本字段中设置值时，我只得到最后一个输入值。所有其他输入值都被覆盖。我们可以使用 SWITCH 案例，但是如果我们添加更多的输入字段，那么代码会变得非常大。

这是我的示例代码：

var TextBox = React.createClass({
  setTextState : function(event){ 
    idval = event.target.id;
    console.log(idval);
    this.setState({idval  : event.target.value}); //Here the issue
  },

  content: function() {

    name1 = "task_1";
    name2 = "task_2";
    name3 = "task_3";
    name4 = "task_4";
    name5 = "task_5";
    name6 = "task_6";
    name7 = "task_7";

    return [
      <td> <TextInput type="text" /></td>, <td> <TextInput type="text" name={name1} id={name1} setText={this.setTextState}/></td>,
      <td> <TextInput type="text" name={name2} id={name2} setText={this.setTextState}/></td>, <td> <TextInput type="text" name={name3} id={name3} setText={this.setTextState}/></td>,
      <td> <TextInput type="text" name={name4} id={name4} setText={this.setTextState}/></td>, <td> <TextInput type="text" name={name5} id={name5} setText={this.setTextState}/></td>,
      <td> <TextInput type="text" name={name6} id={name6} setText={this.setTextState}/></td>, <td> <TextInput type="text" name={name7} id={name7} setText={this.setTextState}/></td>
    ]
  },

  submitValue : function() {

  },

  render: function() {
    return (<tr>{this.content()}<td><input type="button" onClick={this.submitValue}/></td></tr>);
  }
});

Answer 1

除非您尝试设置一个名为 idval 的状态变量，否则这是不正确的：

this.setState({idval  : event.target.value}); //Here the issue

也就是说，JavaScript 不使用变量idval 的值作为对象的键；它使用字符串文字"idval"。请参阅此代码以获取示例：

var val = "testing";
var a = { val: 1 };
document.write("a.testing: " + a[val]);
document.write("<br>");
document.write("a.val: " + a["val"]);

根据您的设置，您似乎更有可能尝试设置一个名为 task_1、task_2 等的状态变量。为此，您需要更多类似的东西：

setTextState : function(event){ 
  idval = event.target.id;
  console.log(idval);
  var stateUpdate = {};
  stateUpdate[idval] = event.target.value;
  this.setState(stateUpdate);
},

Answer 2

如果“idval”变量具有正确的值，那么 setState() 调用应该可以按预期工作。您可以尝试复制 currentState 并附加到它，看看它是否有效。如果不行，请贴出完整代码。

setTextState : function(event){ 
    idval = event.target.id;
    console.log(idval);
    newState = this.state;
    newState.idval = event.target.value;
    this.setState(newState); 
},