Fatal编程技术网
  • javascript/
  • Javascript 使用reactjs添加动态标记

Javascript 使用reactjs添加动态标记

javascript jquery reactjs

Javascript 使用reactjs添加动态标记,javascript,jquery,reactjs,Javascript,Jquery,Reactjs,我有一个带有加号和减号符号的文本框，可以添加新的文本框并相应地删除单击的文本框。。我想使用reactjs添加一个plus。。我可以隐藏选定的文本框（此函数为：removeChoice），但不能添加文本框（此函数为：addChoice） var MySelect=React.createClass({ getInitialState:函数（）{ 返回{ 值：“”， 标签：“” } }, 更改：功能（事件）{ this.setState（{value:event.target.value}）； },

我有一个带有加号和减号符号的文本框，可以添加新的文本框并相应地删除单击的文本框。。我想使用reactjs添加一个plus。。我可以隐藏选定的文本框（此函数为：removeChoice），但不能添加文本框（此函数为：addChoice）

var MySelect=React.createClass({
getInitialState:函数（）{
返回{
值：“”，
标签：“”
}
},
更改：功能（事件）{
this.setState（{value:event.target.value}）；
},
text更改：函数（事件）{
this.setState（{label:event.target.value}）；
},
addChoice:函数（事件）{
var a=event.currentTarget.parentNode.parentNode；
$（a）.append（）；//此处
},
removeChoice:函数（事件）{
var a=event.currentTarget.parentNode；
$（a）.css（'display'，'none'）；
},
render:function（）{
如果（$（'.selected'）.length>0&&$（'.selected'）.find（'th'）.length>0&&this.state.label！=''）{$（'.selected'）.find（'th'）[0]。innerHTML=this.state.label；}
如果（$（'.selected'）.length>0&&$（'.selected'）.find（'td'）.length>0&&this.state.value！=''）{
if（this.state.value==“textarea”）$（'.selected'）.find（'td'）[0]。innerHTML=''；

否则，如果（this.state.value==“select”）$（'.selected'）.find（'td'）[0].innerHTML=“Hmmmm），我已经遇到了相同的请求


目标是通过一个递增或递减的数字来管理项目的动态列表。希望它能对您有所帮助。
您应该明确地避免使用即时选择器操纵DOM或使用CSS隐藏组件。React会根据隔离状态处理DOM的呈现方式。此外，您还可以ave需要处理其声明的组件的生命周期方法。相反，您可以使用状态跟踪所需的数据。下面是一个相当简单的示例：




var Hello=React.createClass({
getInitialState:函数（）{
返回{
文本框：[{value:'foo'}]
}
},
addNew:function（）{
const textboxs=this.state.textboxs；
push（{value:'hello'}）；
this.setState（{textboxs:textboxs}）；
},
render:function（）{
报税表（
{
this.state.textboxs.map（（项，i）=>）
}
添加一个新的
）； } }); ReactDOM.render（， document.getElementById（'容器'） );
让我试试：）我做了同样的事情
render:function（）{this.state.textboxs.map（function（answer，I）{return（）；}）；}
但它显示必须返回一个有效的组件。您可能返回了未定义的、数组或其他无效的对象。错误您知道吗？@debin您的代码被扩展为地狱，您缺少正确的ES6语法，甚至更正确的JSX语法。此外，StackOverflow的目的是提供可靠的答案和范例，而不是调试代码。以某种方式看看我是如何改进你的提琴样本的谢谢我有了主意。如果我需要进一步的帮助，会给你发消息：）我可以通过
remove（）
直接删除选中的文本框吗？ 
 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>
                    );
                }
            });

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