清除自定义组件的状态

Question

嘿，我还在学习 React Native，我有这个自定义选择器组件 iOS，我要做的是在我做 [=12] 时清除选择器=].当我从另一个组件

执行 onSubmit() 时，我应该如何将选择器状态设置为默认状态

PickerWrapper.js

class PickerWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type_absen: this.props.items[0].description,
            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={item.id} />)}
                    </Picker>
                </View>
            </Modal>);

        if (Platform.OS === 'ios') {
            var idx = this.props.items.findIndex(item => item.id === this.state.type_absen);
            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 }}> {idx !== -1 ? this.props.items[idx].description : 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 >);
        }
    }
   }

这是我调用我的选择器的地方

App.js

class App extends Component {

  constructor() {
    super();
    this.state = {
      type_absen: ''
    }

    this.onSubmit = this.onSubmit.bind(this);
  }

onSubmit() {
  this.props.actionsAuth.changeSchedule(this.props.token, this.state.type_absen, (message) => alert(message));
  this.setState({ type_absen: ''}); 
 }
  
render(){
  let scheduleTypes = this.props.schedules;
  return(
      <PickerWrapper items={[{ "description": "Schedule Type", "id": "0" }, ...scheduleTypes]} onSelect={(item) => this.setState({ type_absen: item })} />
    );
  }
}

Answer 1

要从 parent 更新 child (PickerWrapper)，您必须在 child 中创建一个新方法并从 parent 中调用它。
为此，parent 应该具有 child reference 才能从中调用某些方法

    class App extends Component {

      constructor() {
        super();
        this.state = {
          type_absen: ''
        }

        this.pickerRef = undefined;
        this.onSubmit = this.onSubmit.bind(this);
      }

    onSubmit() {
      this.props.actionsAuth.changeSchedule(this.props.token, this.state.type_absen, (message) => alert(message));
      this.setState({ type_absen: ''});
      this.pickerRef.reset();
     }

    render(){
      let scheduleTypes = this.props.schedules;
      return(
          <PickerWrapper
              ref={ref => ref && this.pickerRef = ref}
              items={[{ "description": "Schedule Type", "id": "0" }, ...scheduleTypes]}
              onSelect={(item) => this.setState({ type_absen: item })} />
        );
      }
    }

然后，在 child 中创建重置方法：

class PickerWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type_absen: this.props.items[0].description,
            modal: false
        }
    }

    reset = () => {
        this.setState({type_absen: this.props.items[0].description, 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={item.id} />)}
                    </Picker>
                </View>
            </Modal>);

        if (Platform.OS === 'ios') {
            var idx = this.props.items.findIndex(item => item.id === this.state.type_absen);
            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 }}> {idx !== -1 ? this.props.items[idx].description : 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 >);
        }
    }
   }

此外，每次设置 setState 时，您的组件都是 re-render。您可以通过切换

来避免双重 re-render

this.setState({type_absen: itemValue});
this.setState({modal: false});

至此

this.setState({type_absen: itemValue, modal: false});

清除自定义组件的状态

Clear state on custom component

javascript

picker

react-native