Javascript 更改select后无法更新表字段
我的表结构如下:Javascript 更改select后无法更新表字段,javascript,jquery,html,reactjs,Javascript,Jquery,Html,Reactjs,我的表结构如下: <table> <tr class="selected"><th>number</th><td><input type="number"/></td></tr> <tr><th>name</th><td><input type="text"/></td></tr> ... </table>
<table>
<tr class="selected"><th>number</th><td><input type="number"/></td></tr>
<tr><th>name</th><td><input type="text"/></td></tr> ...
</table>
text区域有助于更改th
字段并选择更改td
字段。当我从选择选项中选择时,标记将更改,但它在错误行中显示[OBJECT OBJECT]
。我想根据从选择选项中选择的值更改td
。我可以做var newTag=$('.selected').find('td')[0].innerHTML={newTag}
中的change:
?…我是否缺少以下内容?请建议我
更新
我可以更改th值,但当我单击第二个td,再次单击第一个td时,它会显示旧文本。所以尝试使用REDUX(通量实现)实现它。您可以看到完整的文档。也有很多教程在上,所以试着用REDUX(一种FLUX实现)来实现它。您可以看到完整的文档。还有很多关于如何处理文本区域的更改的教程???@MichaelRasoahaingo我还没有做。b两种方法都一样吗?你看到你的JSX无效了吗?有一个公开的失踪:(就我而言,它工作正常,输入类型根据代码中的select值进行更新,我不知道是什么。SELECTED对不起,我删除了一些不必要的标记,这就是为什么…你如何处理文本区域的更改???@MichaelRasahaingo我还没有这样做..两种方式都一样吗?你看到你的JSX无效吗?有一个开放的缺失:(就我而言,它工作正常,输入类型根据代码中的select值更新,我不知道是什么。SELECTED抱歉,我删除了一些不必要的标记,这就是为什么。。。
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});
},
render: function(){
if($('.selected').length >0 && $('.selected').find('td').length>0){ var stateValue = {this}; $('.selected').find('th')[0].innerHTML = stateValue.this.state.label; }
if($('.selected').length >0 && $('.selected').find('td').length>0){ var newTag = <input type={this.state.value}/>; $('.selected').find('td')[0].innerHTML = {newTag} }
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="multiple">Multiple Choice</option>
<option value="date">Date</option>
<option value="phone">Phone</option>
<option value="address">Address</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" /><span> <i className="fa fa-plus-circle icon add"
title="Add another choice"></i><i className="fa fa-minus-circle icon remove" title="Delete this choice">
</i></span>
</div>
<div className="space">
<input type="text" className="inputControl" />
<span><i className="fa fa-plus-circle icon add" title="Add another choice"></i><i className="fa fa-minus-circle icon remove"
title="Delete this choice"></i></span>
</div>
</div>
<p><input type={this.state.value} /></p>
</div>
);
}
});