子节点和父节点onPress的setState（）

Question

我有一个孩子在父母中有一个可触摸的组件，我想在按下可触摸组件时设置孩子和父母的状态（）。有没有一个很好的方法来实现这一目标？

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>
  )
}