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

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

这里我的示例代码：

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

来源

2015-04-03 jagadeesh puthukkudi

“所有其他输入值都被写了” - 我认为你需要澄清发生了什么，因为这对我来说并不清楚。 – starwed 2015-04-03 15:14:06

这里输入文本字段名称是task_1，task_2等。当我在文本字段中输入值并试图获取所有这些值时，我只获取最后插入的值。 – 2015-04-03 15:21:51

如果“idval”变量具有正确的值，那么的setState（）调用应该像您期望的工作。您可以尝试复制currentState并将其附加到它并查看它是否有效。如果不起作用，请发布完整的代码。

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

来源

2015-04-03 15:29:01 Cristik

生成错误。 Uncaught TypeError：无法读取未定义的属性'id' – 2015-04-03 15:46:15

我已经用可能的解决方案更新了答案。顺便说一句，你使用什么反应版本？ – Cristik 2015-04-03 16:02:35

除非你想设置名为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); 
},

来源

2015-04-03 17:46:05

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

回答

相关问题