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

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

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

onInfoUserListCheckChange（）{ //在这做点什么 }

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

this.onInfoUserListCheckChange = onInfoUserListCheckChange.bind(this);

从孩子那里举起活动。

onPush（）{ // ... if（this.props.onCheckChange）{ this.props.onCheckChange（//检查值）; }
}
将处理程序从父级
传递给子级
＆LT; InfoUserList onCheck = {this.onCheckChange} /＆gt;

将道具传递给儿童的主要组件（React Native）

1 个答案: