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

Question

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

代码片段：

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

});

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

Answer 1

您应该处理 onChange 事件以更新 controlled input.

查看文档here

A controlled <input> has a value prop. Rendering a controlled <input> will reflect the value of the value prop.

和

User input will have no effect on the rendered element

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

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

Html tags renders but does't function in reactjs

jsx

reactjs