使用reactjs添加動態標籤

Question

我有正負號的文本框，可以添加新的文本框並相應地移除點擊的文本框..我想添加onclick加上使用reactjs ..我可以隱藏選定的文本框（對於此功能是：removeChoice），但不能添加文本框（該功能是：addChoice）

var MySelect = React.createClass({ 
        getInitialState: function() { 
         return { 
          value: '', 
          label: '' 
         } 
        }, 
        change: function(event) { 
         this.setState({value: event.target.value});     
        }, 
        textChange: function(event) {      
         this.setState({label: event.target.value});      
        }, 
        addChoice: function(event) { 
         var a = event.currentTarget.parentNode.parentNode; 
         $(a).append(); //HERE 
        }, 
        removeChoice: function(event) { 
         var a = event.currentTarget.parentNode; 
         $(a).css('display','none'); 
        }, 
        render: function(){ 
         if($('.selected').length >0 && $('.selected').find('th').length>0 && this.state.label!=''){ $('.selected').find('th')[0].innerHTML = this.state.label; } 
         if($('.selected').length >0 && $('.selected').find('td').length>0 && this.state.value!='') { 
          if(this.state.value == "textarea") $('.selected').find('td')[0].innerHTML = '<textarea rows="4" cols="20"></textarea>'; 
          else if(this.state.value == "select") $('.selected').find('td')[0].innerHTML = "<select style='width: 40%'><option></option</select>"; 
          else $('.selected').find('td')[0].innerHTML = '<input type="'+this.state.value+'"/>'; 
          if(this.state.value != "select") $('#selectOption').hide(); 
         } 
         return(
          <div> 
           <p>Field label</p> 
           <textarea rows="3" cols="30" className="inputControl" id="field_name" onChange={this.textChange}></textarea><br /> 
           <br /> 
           <p>Field type</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" style={{display: 'none'}}> 
           <p> 
            Choices 
           </p> 
           <div className="space"> 
            <input type="text" className="inputControl" /></div> 
           <div className="space"> 
            <input type="text" className="inputControl" /> 
            <i className="fa fa-plus-circle icon add" title="Add another choice" onClick={this.addChoice} ></i><i className="fa fa-minus-circle icon remove" onClick={this.removeChoice} 
             title="Delete this choice"></i> 
           </div> 
           <div className="space"> 
            <input type="text" className="inputControl" /> 
            <i className="fa fa-plus-circle icon add" title="Add another choice" onClick={this.addChoice} ></i><i className="fa fa-minus-circle icon remove" onClick={this.removeChoice} 
             title="Delete this choice"></i> 
           </div> 
          </div>     
         </div> 
        ); 
       } 
      }); 

任何人都可以提出如何添加動態文本框？

Answer 1

Hmmmm，我已經遇到此請求，here

的目標是通過將被遞增或遞減一個數字來管理一個項目的動態列表。希望它能幫助你。

Answer 2

您應該絕對避免使用即時選擇器或使用CSS隱藏組件來操作DOM。 React負責基於孤立狀態來呈現DOM。此外，你必須照顧它聲明的組件的生命週期方法。相反，您可以使用狀態跟蹤所需的數據。這裏是一個非常簡單的例子：

https://jsfiddle.net/reactjs/69z2wepo/

var Hello = React.createClass({ 
    getInitialState: function() { 
    return { 
     textboxes:[{value:'foo'}] 
    } 
    }, 
    addNew:function(){ 
    const textboxes = this.state.textboxes; 
    textboxes.push({value: 'hello'}); 
    this.setState({ textboxes : textboxes }); 
    }, 
    render: function() { 
    return (<div > 
    { 
     this.state.textboxes.map((item, i) => <input key={i} type="text" value={item.value} />) 
    } 
    <button onClick={this.addNew}>Add a new one</button> 
    < /div>); 
    } 
}); 

ReactDOM.render(< Hello/> , 
    document.getElementById('container') 
);