javascript - 使用 reactjs 添加动态标签

Question

我有带有加号和减号符号的文本框，可以添加新文本框并相应地删除单击的文本框。我想使用 reactjs 添加 onclick of plus 。我可以隐藏选定的文本框(此功能是: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

您应该绝对避免使用即时选择器操作 DOM 或使用 CSS 隐藏组件。 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')
);