gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 10:25:13 25 4
gpt4 key购买 nike

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

这是我的示例代码:

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 的值作为对象的键;它使用字符串文字“idval”。请参阅此代码的示例:

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

根据您的设置,您似乎更有可能尝试设置名为 task_1task_2 等的状态变量。为此,您' d想要更多类似这样的东西:

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

关于javascript - ReactJS中动态生成的输入文本字段值设置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29434144/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com