學習React因此可能會有點難以解決的問題。考慮以下代碼:將行動綁定到純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'));
正如你可以看到目前點擊Container中的按鈕時,handleButtonToggle()
被觸發從而改變按鈕本身的狀態,然後調用一個函數來改變父容器的狀態。這是React的方式嗎?此時,當功能handleButtonToggle
被觸發時容器狀態被改變。理想情況下,我希望Container狀態直接依賴於MyButton 狀態(因爲將來可能會有方法設置按鈕狀態,而不是通過handleButtonToggle
,而且我不想在每次狀態更改時手動調用this.props.handleToggle
)。 。換句話說,當按鈕組件的狀態改變時,是否有辦法在按鈕組件中執行類似this.props.handleToggle(this.state.pressed)
的操作。
後面的版本看起來像我在找什麼! – redFur