將道具傳遞給兒童的主要組件（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.onInfoUserListCheckChange = onInfoUserListCheckChange.bind(this); 

提高從子事件。

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

從父

< InfoUserList的oncheck =傳遞處理器孩子{} this.onCheckChange />