保存动态添加使用reactjs

Question

我想保存的文本价值的文本框的onchange的值的多个文本框的值..

 var MySelect = React.createClass({ 
       getInitialState: function() { 
        return { 
         label: '' , 
         options: [{ value: '', type: 'text' }, 
          { value: '', type: 'text' }, 
          { value: '', type: 'text' }] 
        } 
       }, 
       change: function(event) { 
        this.state.label = ''; 
        this.setState({value: event.target.value}); 
       }, 
render: function() { 
return(
         <div> 
          <p><b>Field type</b></p> 
          <select className="inputControl" id="field_control" onChange={this.change} value={this.state.value}>       
           <option value="text">Textbox</option> 
           <option value="number">Number</option> 
           <option value="checkbox">Checkbox</option> 
           <option value="radio">Radio</option> 
           <option value="textarea">Textarea</option> 
           <option value="select">Dropdown</option> 
           <option value="date">Date</option> 
           <option value="email">Email</option> 
          </select> 
         <br /> 
         <br /> 
         <div id="selectOption"> 
          <p> 
           <b>Choices</b> 
          </p> 
          <div id="SelectChoice" onChange={this.fillSelectOption}> 
           { 
            this.state.options.map(function(opt, i) {           
             return <input type={ opt.type } className="inputControl space" key={i} onKeyup={this.saveValue}/> 
            }) 
           } 
           <i className="fa fa-plus-circle icon add" title="Add another choice" onClick={this.addOption}></i> 
          </div> 
          <div id="CheckboxChoice" style={{display: 'none'}}> 
          </div> 
          <div id="RadioChoice" style={{display: 'none'}}> 
          </div> 
         </div>     
        </div> 
       ); 
      }, 
      addOption: function(e) {         
       this.state.options.push({"value":'', "type":'text'}); 
       this.forceUpdate();    
      } 
}); 

我动态添加文本框，但是当我点击fa fa-plus-circle icon add然后添加新的文本框，但重视不要” t出现在文本框中..我可以在用户更改时保存值吗？

Answer 1

您遗漏了input元素中的value属性。

this.state.options.map(function(opt, i) {           
    return <input type={ opt.type } value={opt.value} className="inputControl space" key={i} onKeyup={this.saveValue}/> 
}) 

此外，我看到你是直接在addOption函数中改变状态。而不是你应该这样做。

 addOption: function(e) { 
      let options = this.state.options;     
      options.push({"value":'', "type": 'text'}); 
      this.setState({options: options});    
     }