javascript - ReactJS:获取选定值时无法读取 null 的属性 'value'

Question

我想做的是获取所选<option>的值来自 <select> elemenet 但是在我当前的代码中，我不断收到一条错误消息:

cannot read property 'value' of null.

考虑到我已经尝试了我在网上找到的方法，但它仍然无法正常工作，这真是令人沮丧。任何帮助将不胜感激，谢谢!

import React, { Component } from 'react'

class MyClass extends Component{
    constructor(props){
        super(props);

        this.state = {
            selectedItem: ""
        };
    }

    onChange() {
        var selectedItem = document.getElementById("selectItem").value
        this.setState({selectedItem: selectedItem})
    }

    render(){
        return (
            <div style={{textAlign: "center"}}>
                <select id="selectItem" defaultValue="option1" onChange={this.onChange()}>
                    <option value="option1">option1</option>
                    <option value="option2">option2</option>
                    <option value="option3">option3</option>
                    <option value="option4">option4</option>
                </select>

                <div>{this.state.selectedItem}</div>
            </div>
        )
    }
}

export default MyClass

我希望它显示在 div 中选择的选项。如果可能的话，我还希望它在加载页面时也显示默认值。

Answer 1

这不起作用的原因是 onChange 的上下文不是您的 MyClass 组件实例的那个，这意味着当 onChange被称为，this不会是 MyClass 的对应实例.

可以通过将此行添加到您的构造函数来解决问题:

constructor(props){
    super(props);

    this.state = {
        selectedItem: ""
    };

    // Add this
    this.onChange = this.onChange.bind(this);
}

更新

加载 <select> 的默认值的一种方法动态:

class MyClass extends Component{
    constructor(props){
        super(props);

        this.state = {
            selectedItem: ""
        };
    }

    componentDidMount() {

        /* Set initally selected value to say, option3 */
        this.setState({ selectedItem : "option3" })
    }

    onChange() {
        var selectedItem = document.getElementById("selectItem").value
        this.setState({selectedItem: selectedItem})
    }

    render(){
        return (
            <div style={{textAlign: "center"}}>
                {/* 
                Specify the select value which will show as option3 by
                default 
                */}
                <select id="selectItem" value={ this.selectedItem }
                        onChange={this.onChange()}>
                    <option value="option1">option1</option>
                    <option value="option2">option2</option>
                    <option value="option3">option3</option>
                    <option value="option4">option4</option>
                </select>

                <div>{this.state.selectedItem}</div>
            </div>
        )
    }
}