设置状态[duplicate]上未定义此值

Question

我知道这是一个具有约束力的问题，但我不确定在哪里绑定它。我尝试了一些不同的方法。

问题发生在应用程序上。\u当用户更改下拉框时选择。我希望它更新状态，以强制日历组件重新加载。

应用程序

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            room: "A"
        }
    }
    _select(e) {
        this.setState({
            room: e.target.value
        });
    }
    render() {
        return (
            <div>
                <Selector select={this._select}/>
                <Calendar room={this.state.room}/>
            </div>
        );
    }
};

export default App;

选择器

const Selector = (props) => {
    var items = API.rooms.map((item) => {
        return(
            <option value={item.room}>Study Room {item.room}</option>
        );
    });

    return (
        <div className="mat-section mat-section--m mat--color-primary">
            <div class="mat-section__body">
                <div class="custom-select">
                    <select onChange={props.select}>
                        {items}
                    </select>
                    <div class="custom-select__arrow"></div>
                </div>
            </div>
        </div>
    );      
}

export default Selector;

Answer 1

您需要将this绑定到_select（），以便在您的方法中定义它！

constructor() {
    super();

    this.state = {
        room: "A"
    };

    this._select = this._select.bind(this);
}

如果使用箭头函数，绑定将自动完成，这也是一个选项。

干杯

Answer 2

在构造函数中

this._select = this._select.bind(this);

或es6定义的函数

const _select = () => {....}