javascript - 将数据传递给自定义选择器

Question

目前我正在开发一个带有选择器的应用程序，我正在使用来自 React Native 的选择器组件，但它在 iOS 设备上不能完美运行，所以我找到了一个使用选择器和模态的自定义选择器，它在仅限 iOS。这是代码

class PickerWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type_absen: '',
            modal: false,
        }
    }

    render() {
        let picker;

        let iosPickerModal = (
            <Modal isVisible={this.state.modal} hideModalContentWhileAnimating={true} backdropColor={color.white} backdropOpacity={0.9} animationIn="zoomInDown" animationOut="zoomOutUp" animationInTiming={200} animationOutTiming={200} onBackButtonPress={() => this.setState({ modal: false })} onBackdropPress={() => this.setState({ modal: false })} >
                <View style={{ backgroundColor: color.white, width: 0.9 * windowWidth(), height: 0.3 * windowHeight(), justifyContent: 'center' }}>
                    <Picker
                        selectedValue={this.state.type_absen}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ type_absen: itemValue });
                            this.setState({ modal: false });
                            setTimeout(() => this.props.onSelect(itemValue), 1200);
                        }}
                    >
                        {this.props.items.map((item, key) => <Picker.Item label={item} value={item} key={key} />)}
                    </Picker>
                </View>
            </Modal>);

        if (Platform.OS === 'ios')
            return (
                <View style={this.props.style}>
                    {iosPickerModal}
                    <TouchableOpacity onPress={() => this.setState({ modal: true })}>
                        <View style={{ flexDirection: 'row', height: this.props.height ? this.props.height : normalize(40), width: this.props.width ? this.props.width : 0.68 * windowWidth(), borderWidth: 1, borderColor: color.blue, alignItems: 'center', borderRadius: 5 }}>
                            <Text style={{ fontSize: fontSize.regular, marginRight: 30 }}> {this.state.type_absen}</Text>
                            <IconWrapper name='md-arrow-dropdown' type='ionicon' color={color.light_grey} size={20} onPress={() => this.setState({ modal: true })} style={{ position: 'absolute', right: 10 }} />
                        </View>
                    </TouchableOpacity>
                </View >);
        else
            return (
                <View style={this.props.style} >
                    <Picker
                        selectedValue={this.state.type_absen}
                        style={{ height: this.props.height ? this.props.height : normalize(20), width: this.props.width ? this.props.width : normalize(150) }}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ type_absen: itemValue });
                            this.props.onSelect(itemValue);
                        }}
                    >
                        {this.props.items.map((item, key) => <Picker.Item label={item} value={item} key={key} />)}
                    </Picker>
                </View>);
    }
}

PickerWrapper.propTypes = {
    onSelect: PropTypes.func.isRequired
}

export default PickerWrapper;

我成功地从 api 加载了数据，但我仍然对如何从中获取值感到困惑，这是我使用选择器组件的旧代码

<Picker
 selectedValue={this.state.type_absen}
 style={{backgroundColor:'white'}}
 onValueChange={(val) => this.setState({ type_absen: val })}> 
   {
   this.props.schedules ?   this.props.schedules.map((item, key) => { 
     return <Picker.Item value={item.id} label {item.description} key={item.id} />})
 :
  []
   } 
</Picker>

这是我使用 PickerWrapper 的新代码

export const mapStateToProps = state => ({
  token: state.authReducer.token,
  message: state.authReducer.message,
  schedules: state.authReducer.schedules
});

export const mapDispatchToProps = (dispatch) => ({
  actionsAuth: bindActionCreators(authAction, dispatch)
});

class Change extends Component {
    
  constructor(){
        super();
        this.state={
            type_absen: [],
        }
    }
    
    onPickerValueChange=(value, index)=>{
    this.setState({type_absen: value}, 
      () => {
        Alert.alert("type_absen", this.state.type_absen);
      }
    );
  }
  
  render() {
      return (
        <View style={styles.container}>
              <View style={styles.container}>
                <View style={styles.innerContainer}>             
                  <PickerWrapper items={this.props.schedules.map((item) => item.description )} onSelect={this.onPickerValueChange} />
                  
                </View>  
              </View>
        </View>
      );
  }
}
    
 }

我要做的是获取 item.id。如何在 PickerWrapper 组件中执行此操作？

Answer 1

在类组件中像这样更改选择器包装器

export const mapStateToProps = state => ({
    token: state.authReducer.token,
    message: state.authReducer.message,
    schedules: state.authReducer.schedules
  });

  export const mapDispatchToProps = (dispatch) => ({
    actionsAuth: bindActionCreators(authAction, dispatch)
  });

  class Change extends Component {

    constructor(){
          super();
          this.state={
              type_absen: [],
          }
      }

      onPickerValueChange=(value, index)=>{
      this.setState({type_absen: value}, 
        () => {
          Alert.alert("type_absen", this.state.type_absen);
        }
      );
    }

    render() {
        return (
          <View style={styles.container}>
                <View style={styles.container}>
                  <View style={styles.innerContainer}>             
                    <PickerWrapper items={this.props.schedules} onSelect={this.onPickerValueChange.bind(this)} />

                  </View>  
                </View>
          </View>
        );
    }
  }

然后在你的 PickerWrapper 组件中将它改成这样

class PickerWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type_absen: '',
            modal: false,
        }
    }

    render() {
        let picker;

        let iosPickerModal = (
            <Modal isVisible={this.state.modal} hideModalContentWhileAnimating={true} backdropColor={color.white} backdropOpacity={0.9} animationIn="zoomInDown" animationOut="zoomOutUp" animationInTiming={200} animationOutTiming={200} onBackButtonPress={() => this.setState({ modal: false })} onBackdropPress={() => this.setState({ modal: false })} >
                <View style={{ backgroundColor: color.white, width: 0.9 * windowWidth(), height: 0.3 * windowHeight(), justifyContent: 'center' }}>
                    <Picker
                        selectedValue={this.state.type_absen}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ type_absen: itemValue });
                            this.setState({ modal: false });
                            setTimeout(() => this.props.onSelect(itemValue), 1200);
                        }}
                    >
                        {this.props.items.map((item, key) => <Picker.Item label={item.description} value={item.id} key={key} />)}
                    </Picker>
                </View>
            </Modal>);

        if (Platform.OS === 'ios')
            return (
                <View style={this.props.style}>
                    {iosPickerModal}
                    <TouchableOpacity onPress={() => this.setState({ modal: true })}>
                        <View style={{ flexDirection: 'row', height: this.props.height ? this.props.height : normalize(40), width: this.props.width ? this.props.width : 0.68 * windowWidth(), borderWidth: 1, borderColor: color.blue, alignItems: 'center', borderRadius: 5 }}>
                            <Text style={{ fontSize: fontSize.regular, marginRight: 30 }}> {this.state.type_absen}</Text>
                            <IconWrapper name='md-arrow-dropdown' type='ionicon' color={color.light_grey} size={20} onPress={() => this.setState({ modal: true })} style={{ position: 'absolute', right: 10 }} />
                        </View>
                    </TouchableOpacity>
                </View >);
        else
            return (
                <View style={this.props.style} >
                    <Picker
                        selectedValue={this.state.type_absen}
                        style={{ height: this.props.height ? this.props.height : normalize(20), width: this.props.width ? this.props.width : normalize(150) }}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ type_absen: itemValue });
                            this.props.onSelect(itemValue, index);
                        }}
                    >
                        {this.props.items.map((item, key) => <Picker.Item label={item.description} value={item.id} key={key} />)}
                    </Picker>
                </View>);
    }
}

PickerWrapper.propTypes = {
    onSelect: PropTypes.func.isRequired
}

export default PickerWrapper;