【问题标题】:Can not update table field onchange of select无法更新表字段 onchange of select
【发布时间】:2016-10-03 06:01:55
【问题描述】:

我的表结构是这样的:

<table>
<tr class="selected"><th>number</th><td><input type="number"/></td></tr>
<tr><th>name</th><td><input type="text"/></td></tr> ...
</table>

我创建了 textarea 并选择使用 reactjs 相应地更改 thtd.. 代码:

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

textarea 有助于更改th 字段并选择更改td 字段..当我从选择选项中选择时,标签将更改&lt;p&gt;&lt;input type={this.state.value} /&gt;&lt;/p&gt;,但它在错误行中显示[OBJECT OBJECT]..我想要根据从选择选项中选择的值更改td。我可以在change: 中做var newTag = &lt;input type={this.state.value}/&gt;; $('.selected').find('td')[0].innerHTML = {newTag} 吗?...我错过了什么吗?请给我建议..

更新 我可以更改 th 值,但是当我单击第二个 td 并再次单击第一个 td 时,它会显示旧文本..

【问题讨论】:

  • 如何处理来自 textarea 的更改??
  • @MichaelRasoahaingo 我还没有完成。可能 b 两种方式都一样
  • 您是否看到您的 JSX 无效?缺少一个打开的
    :( 在我这边,它工作正常,输入 TYPE 根据选择值更新
  • 在你的代码中,我不知道什么是 .selected
  • 抱歉,我删除了一些不必要的标签,这就是为什么...

标签: javascript jquery html reactjs


【解决方案1】:

所以尝试使用 REDUX(一种 FLUX 实现)来实现它。您可以查看完整的文档hereegghead也有很多教程

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签