使用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') 
);