在子组件中反应本机设置不同的状态变量

时间:2020-08-11 21:33:41

标签: react-native

我有2个组件都是多选项目,变量-字母和大洲是从父组件传递来的参数。

<View style={globalStyles.settingspagecontainer}>

                <MultiSelectExample 
                    selectText='Select Characters'
                    items={alphabet_items} 
                    alphabets={alphabets}/>
                <MultiSelectExample 
                    selectText='Select Continents'
                    items={continent_items}
                    continents={continents}/>                                        
            </View>

这里是多选组件-

class MultiSelectExample extends Component {

  state = {
    selectedItems : []
  };

  
  onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems });
    console.log('multipleselect set state')

  };

  render() {
    const { selectedItems } = this.state;
    
    return (
      <View style={{ flex: 1 }}>
        <MultiSelect
          hideTags
          items={this.props.items}
          // settings={this.props.settings}
          continents={this.props.continents}
          alphabets={this.props.alphabets}
          uniqueKey="id"
          ref={(component) => { this.multiSelect = component }}
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={selectedItems}
          selectText={this.props.selectText}
          searchInputPlaceholderText="Search Items..."
          onChangeInput={ (text)=> console.log(text)}
          altFontFamily="ProximaNova-Light"
          tagRemoveIconColor="#CCC"
          tagBorderColor="#CCC"
          tagTextColor="#CCC"
          selectedItemTextColor="#CCC"
          selectedItemIconColor="#CCC"
          itemTextColor="#000"
          displayKey="name"
          searchInputStyle={{ color: '#CCC' }}
          submitButtonColor="#CCC"
          submitButtonText="Submit"
        />
        <View>
        { this.multiSelect ? this.multiSelect.getSelectedItemsExt(selectedItems) : null}
        </View>
      </View>
    );
  }
}

export default MultiSelectExample;

当用户单击第一个多选项目时-字母状态变量需要更改。 当用户单击第二个多选项目时,需要更改大洲状态变量。

如何确定用户单击了哪个多选项目?

0 个答案:

没有答案