子onPress和父onPress的setState()

Question

我有一个在父级中有可触摸组件的子级，我想在按下可触摸组件时同时对子级和父级执行setState()。有没有好的方法来实现这一点呢？

Answer 1

如果数据同时影响子组件和父组件，那么应该将数据移动到父组件的状态，然后通过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>
  )
}