Question

我有一个div，它在按钮触发的布尔条件下呈现。我在新div中有多个选择选项。问题只是第一部作品而其他作品不是。

代码段：

var Results = React.createClass({
getInitialState: function(){
    return {
        partname:[],
        moveOptions: false,
        fromLocation:'',
        toLocation:'',
        moveQuantity:0
    }
},
componentWillMount:function(){
    var partInfo = [];
    var count = 0;
   //ajax calls to get partInfo
    this.setState({
        partInfo:partInfo
    });
},
showMoveOptions: function(){
    this.setState({moveOptions:!this.state.moveOptions});
},

movePart: function(){
    //ajax call
},
handleQuantityChange: function(e){
    this.setState({
        moveQuantity:e.target.value
    });
},
handleFromChange: function(e){
    this.setState({
        fromLocation:e.target.value
    });
},
handleToChange: function(e){
    this.setState({
        toLocation:e.target.value
    });
},

render: function() {
    var partInfo = this.state.partInfo;
    return(
        <div>
        <div id="results">
        <br/>
            <div className="col-sm-6">
                <h3>Part Name :{this.props.partname}</h3>
                <div className="container">
                  {
                        partInfo.map(function(l){
                        return([
                                <div>
                                         <h3>Building: {l.building}</h3>
                                         <h3>Location: {l.location}</h3>
                                         <h3>Quantity: {l.qty}</h3>
                                </div>
                            ]);
                        }.bind(this))
                    }
                </div>
            </div>
            <div className="col-sm-6">        
                <button type="button" onClick={() => this.showMoveOptions()}>Move</button>

            </div>
        </div>
     { this.state.moveOptions ? 
                <div>
                    <div>
                        <h3>From: </h3>
                            <select onChange={this.handleFromChange.bind(this)}>

                            partInfo.map(function(from){
                                    return(
                                            <option value={from.location}>{from.location}</option>
                                    )
                                }
                            </select><br/>
                        <h3>To: </h3> 
                            <select onChange={this.handleToChange.bind(this)} >

                                partInfo.map(function(to){
                                    return(
                                            <option value={to.location}>{to.location}</option>
                                    )
                                }
                            </select><br/>

                        <h3>Quantity:</h3>
                        <input type="text" name="quantity" value={this.state.moveQuantity} onChange={this.handleQuantityChange.bind(this)}/>

                    </div>
                    <div>
                        <button type="button" onClick={() => this.movePart()}>Submit</button>
                    </div>
                </div>  : null
                }
                </div>
            );
        }

}）;

如代码所示，第一个选择标记有效。之后所有标签都会呈现，但我既不能选择下拉菜单，也不能更改输入标签中的文字。

Answer 1

您应该处理onChange事件以更新受控 input。

查看文档here

受控 <input>有value道具。渲染受控<input>将反映value道具的价值。

和

用户输入对渲染元素
没有影响

我已经使用您的代码制作了fiddle。您在代码段中丢失了一些括号，并且在使用this语法时不应将处理程序绑定到React.createClass。但其余的工作正常。

Html标签呈现但在reactjs中不起作用

1 个答案: