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

Dynamically generated input textfield value setting issue in ReactJS

本文关键字：字段 文本 设置 问题 输入 动态 ReactJS      更新时间：2023-09-26

我在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>);
  }
});

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

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

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

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);
},

如果"idval"变量的值正确，则setState（）调用应按预期工作。您可以尝试复制currentState并附加到它，看看它是否有效。如果它不起作用，请张贴完整的代码。

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