Как получить значение выбора тега в ReactJs

Question

Я строй вида что-то вроде этого

var TableforbasictaskForm = React.createClass({ 

    getInitialState: function() { 
     return { 
      taskName: '', 
      description: '', 
      empComment: '', 
      emprating: '' 
     }; 
    }, 
    handletaskNameChange: function(e) { 
     this.setState({ 
      taskName: e.target.value 
     }); 
    }, 
    handledescriptionChange: function(e) { 
     this.setState({ 
      description: e.target.value 
     }); 
    }, 
    handleempCommentChange: function(e) { 
     this.setState({ 
      empComment: e.target.value 
     }); 
    }, 
    handleempratingChange: function(e) { 
     this.setState({ 
      emprating: e.target.selected 
     }); 
    }, 

    render: function() { 
     return (< div className = "row margin-top" > 
      < form className = "col-md-12" > 
      < div className = "col-md-2" > 
      < input className = "form-control " 
      type = "text" 
      placeholder = "Task name" 
      value = { 
       this.state.taskName 
      } 
      onChange = { 
       this.handletaskNameChange 
      } 
      /> < /div> < div className = "col-md-3" > 
      < textarea className = "form-control" 
      name = "description" 
      placeholder = "Standard Discription of task" 
      value = { 
       this.state.description 
      } 
      onChange = { 
       this.handledescriptionChange 
      } 
      /> < /div> < div className = "col-md-3" > 
      < textarea className = "form-control" 
      name = "empComment" 
      placeholder = "Employee Comment" 
      value = { 
       this.state.empComment 
      } 
      onChange = { 
       this.handleempCommentChange 
      } 
      /> < /div> 

      < div className = "col-md-2" > 
      < select value = { 
       optionsState 
      } 
      className = "form-control" 
      name = "emprating" 
      onChange = { 
       this.handleempratingChange 
      } > 
      < option value = "" > Employee Ratings < /option> < option value = "1" > 1 < /option> < option value = "2" > 2 < /option> < option value = "3" > 3 < /option> < option value = "4" > 4 < /option> < option value = "5" > 5 < /option> < /select> < /div> < div className = "col-md-2" > 
      < input className = "form-control" 
      type = "submit" 
      value = "Post"/> 
      < /div> < /form> < /div> 
     ); 
    } 
}); 

Итак, я хочу знать, как определить Select тега, так что я могу загрузить значение из выбранного параметра в переменную emprating.

Мой текущий код не работает должным образом.

Answer 1

Вы можете использовать ref для доступа к значению входного тега в React.

let nodeRef; 

<div className="col-md-2"> 
    <input 
    className="form-control " 
    type="text" 
    placeholder="Task name" 
    ref = { node => { 
      nodeRef = node; 
     }} 
    value={this.state.taskName} 
    onChange={this.handletaskNameChange} 
    /> 
</div> 

Теперь вы можете использовать эту переменную nodeRef, чтобы получить значение. См. Это для получения дополнительной информации: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute