Блог

У меня есть 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>
            );
        }   
  

});

Как показано в коде, первый тег select работает. После этого отображаются все теги, но я не могу ни выбрать выпадающее меню, ни изменить текст во входном теге.

Вы должны обработать onChange событие для обновления контролируемого input .

Проверьте документацию здесь

У контролируемого <input> есть value реквизит. Отображение контролируемого <input> будет отражать значение value реквизита.

и

Пользовательский ввод не окажет никакого влияния на отображаемый элемент

Я повозился с вашим кодом. Вы потеряли некоторые скобки в своем фрагменте, и вам не следует привязывать обработчики к this при использовании React.createClass синтаксиса. Но остальное работает просто отлично.