我有一个在父母中有可触摸组件的孩子,我想在按下可触摸组件时设置孩子和父母的状态()。有没有一个很好的方法来实现这个目标?
答案 0 :(得分:3)
如果数据同时影响子组件和父组件,则应将数据移动到父级状态,然后通过props传递给子组件。因此,在您的实例中,我建议将状态从子组件移动到父组件中。然后创建一个函数,设置父组件内的状态,并通过props将该函数传递给子组件。
例如:
class ParentComponent extends React.Component {
state = {
isPressed: false
}
toggleIsPressed = () => {
this.setState({ isPressed: !this.state.isPressed })
}
render(){
return(
<ChildComponent toggleIsPressed={this.toggleIsPressed} imPressed={this.state.imPressed} />
)
}
}
const ChildComponent = ({ toggleIsPressed, imPressed }) => {
return(
<button onClick={toggleIsPressed}>{ isPressed ? "I'm pressed" : "I'm not pressed"}</button>
)
}