如何在ReactJs中获取select标记的值

I am building a form something like this

我正在构建这样的表单

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

So, I want to know how to define the Select tag so that I can load the value of the selected option into the emprating variable .

所以,我想知道如何定义Select标签,以便我可以将所选选项的值加载到emprating变量中。

My current code is not working properly.

我当前的代码无法正常工作。

1 个解决方案

#1

You can use ref to access value from an input tag in React.

您可以使用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>

Now you can use this nodeRef variable to get the value. See this for more details: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

现在您可以使用此nodeRef变量来获取值。有关详细信息,请参阅此处:https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

#1