学习 React 可能是一个有点菜鸟的问题。考虑这段代码:
class Application extends React.Component {
render() {
return <Container />
}
}
class Container extends React.Component {
constructor(props) {
super(props)
this.state = {
isOn: false
}
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle(on) {
this.setState({
isOn: on
});
}
render() {
return (
<div>
<p>
{this.state.isOn ? 'on' : 'off'}
</p>
<MyButton handleToggle={this.handleToggle} />
</div>
);
}
}
class MyButton extends React.Component {
constructor(props) {
super(props);
this.state = {
pressed: false
}
this.handleButtonToggle = this.handleButtonToggle.bind(this);
}
handleButtonToggle() {
const on = !this.state.pressed
this.setState({
pressed: on
});
this.props.handleToggle(on);
}
render() {
return (
<div>
<button onClick={this.handleButtonToggle}>
{this.state.pressed ? "pressed" : "depressed"}
</button>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
正如您当前所看到的,当单击容器内的按钮时,会触发handleButtonToggle()
,这会更改按钮本身的状态,然后调用一个函数来更改父容器的状态。这是 React 的方式吗?目前,当函数 handleButtonToggle
被触发时,容器状态会发生变化。理想情况下,我希望容器状态直接依赖于 MyButton state (因为将来可能会有除了通过 handleButtonToggle
之外的方式设置按钮状态,但我不这样做)每次状态更改时都希望手动调用 this.props.handleToggle
。)。换句话说,当按钮组件的状态发生变化时,有没有办法在按钮组件中执行类似 this.props.handleToggle(this.state.pressed)
的操作。
最佳答案
查看代码后,编写 Button 组件的更好方法是使其成为受控组件。如果容器组件需要保持按下状态,受控按钮组件将从容器组件接收按下状态作为 props。
<MyButton pressed={this.state.pressed} onToggle={this.handleToggle} />
Button组件的render方法应该是:
render() {
return (
<div>
<button onClick={this.props.onToggle}>
{this.props.pressed ? "pressed" : "depressed"}
</button>
</div>
);
}
实际的按钮切换将在容器组件的handleToggle方法中完成:
handleButtonToggle() {
let { pressed } = this.state;
pressed = !pressed;
this.setState({
pressed
});
}
关于javascript - 在纯 React 中将操作与状态更改联系起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44229009/