Question

我知道这是某种绑定问题，但我不确定绑定它的位置。我尝试了几件不同的事情。

当用户更改下拉框时，App._select上会出现此问题。我希望它更新状态以强制重新呈现Calendar组件。

应用

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 = this._select.bind(this);

或es6定义的函数

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

Answer 2

您需要将this绑定到_select()，以便在方法中定义它！

constructor() {
    super();

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

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

如果使用箭头功能，则会自动为您完成绑定，这也是一种选择。

干杯。

这个未定义的setState

2 个答案: