将道具从子级传递到主要组件（React Native）

Question

我有两个组成部分。 第一个组件是主要组件，标题为“选择” /“取消选择”

export default class Contacts extends React.Component {
  constructor(props) {
    super(props);
    this.state = { check: 0 };
  }

  oneItem() {
    this.setState({ check: this.state.check === 0 ? 1 : 0 });
  }

    render() {
      const { check } = this.state;
      const infoUserLists = UserList;
      const dataUserList = infoUserLists.map((infoUserList, index) => <InfoUserList
        key={`infu_${index + 1}`}
        infoUserList={infoUserList}
        selectAll={this.state.check}
      />);
      return (
        <View>
              <View>
                <TouchableOpacity onPress={() => this.oneItem()}>
                  <NormalText label={check === 0 ? 'Select All' : 'Unselect'} />
                </TouchableOpacity>
              {dataUserList}
        </View>
      );
  }

}

我也有子组件，并且当用户单击"onPush"功能时，标题“全选/取消选择”应该更改。 因此，用户单击"InfoUserList"组件，但是该标题的状态在主要的"Contacts"组件中已更改。

export default class InfoUserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { check: 0, label: 'Select All' };
  }

  onPush() {
    this.setState({ check: this.state.check === 0 ? 1 : 0 });
  }

  render (){
    const { infoUserList, selectAll } = this.props;
    const { check } = this.state;
    return (
      <View key={infoUserList.name}>
        <TouchableOpacity onPress={() => this.onPush()}>
          <Image source={ check === 1 || selectAll === 1 ? iconsLnk.choose : iconsLnk.plus } />
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

要通知父项子项更改，您需要将事件处理程序从父项传递给子项，然后在事件发生时让子项调用事件处理程序方法。

1. 在父级中定义事件处理程序。

   onInfoUserListCheckChange（）{//在这里做些事}

注意：您可能需要将事件处理程序this绑定到父构造函数中才能访问它。

this.onInfoUserListCheckChange = onInfoUserListCheckChange.bind(this);

2. 从孩子那里引发事件。

   onPush（）{// ...如果（this.props.onCheckChange）{this.props.onCheckChange（//检查值）; }
   }

3. 将处理程序从父级传递给子级

   <InfoUserList onCheck = {this.onCheckChange} />