子节点和父节点onPress的setState()

时间:2018-01-04 16:52:46

标签: reactjs react-native

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

1 个答案:

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