这个问题在这里已有答案:
我知道这是某种绑定问题,但我不确定绑定它的位置。我尝试了几种不同的东西。
当用户更改下拉框时,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;
在构造函数中
this._select = this._select.bind(this);
或es6定义的函数
const _select = () => {....}
你需要将this
绑定到_select()
,以便在你的方法中定义它!
constructor() {
super();
this.state = {
room: "A"
};
this._select = this._select.bind(this);
}
如果使用箭头功能,则会自动为您完成绑定,这也是一种选择。
干杯。