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中動態生成的輸入文本框值設置問題

回答

相關問題