使用ReactJS添加动态标签

Question

我有一个文本框，带有加号和减号符号，可以相应地添加新的文本框并删除已点击的文本框。 我想在使用reactjs的加号上添加onclick事件。 我可以隐藏所选的文本框（对于此函数是：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>
                    );
                }
            });

有人能建议如何动态添加文本框吗？

- Dhara

Answer 1

你绝对要避免使用即时选择器或使用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')
);

- vorillaz

---

我做了同样的事情 render: function() { this.state.textboxes.map(function(answer, i) { return ( <div className="space"> <input key={i} type="text" className="inputControl"/> </div> ); }); } 但是它显示了 必须返回一个有效的React组件。您可能已经返回了未定义、数组或其他无效的对象。 错误，你有什么想法吗？ - Dhara

@debin你的代码太冗长了，你没有使用正确的ES6语法，甚至连正确的JSX语法都错过了。此外，StackOverflow的目的是提供可靠的答案和范例，而不是调试代码。不管怎样，请看一下我对你的示例fiddle进行了优化：https://jsfiddle.net/69z2wepo/44901/ - vorillaz

谢谢，我有个想法了。如果需要进一步帮助，我会给你发信息的 :) - Dhara

我可以直接使用 remove() 函数删除选定的文本框吗？ - Dhara

Answer 2

嗯，我已经在这里面对过同样的请求。

目标是通过一个将被递增或递减的数字来管理一个项目的动态列表。希望这能帮到你。

- Michael Rasoahaingo

---

让我试试吧 :) - Dhara