如何在 React Native 中重置选择器的选定值

Question

我有一个自定义组件 class，它在应用程序中使用 React Native Picker 显示 select 列表。该组件由我使用反应导航的 createBottomTabNavigator() 创建的屏幕之一导入。

使用这个class的屏幕有一个表格。用户填写表单并在提交时将用户定向到另一个屏幕。我正在努力解决的问题是，当用户 returns 到同一表单屏幕而不是选择器列表被重置为其默认值时，我看到的列表具有先前的 selected 值。从 class

提交表单时如何重置它

Picker列表组件如下

    import React from "react";
import {View, Text, StyleSheet, Picker} from "react-native";
import PropTypes from "prop-types";
import {connect} from "react-redux";
import {savePostJobType} from "../reducer.js";
//import store from "../store.js";


class SelectList extends React.Component {
  static propTypes = {
    selectionMesg : PropTypes.string,
    data : PropTypes.array,
  }

  state = {
    pickerColorFlag : "#C7C7CD",
    val : "",
  }

  componentDidMount() {
    console.log("List Mounted")
  }

  render(){
    return(

      <Picker
        selectedValue={this.state.val}
        style = {styles.picker}
        onValueChange={(itemValue, itemIndex) => {
          //this.removeErrorMsg()
          if(itemValue !== "0")
          {
            /*POTENTIAL BUG:The this.state.val shows the value of previous selected value in here*/
            this.setState({
              val: itemValue,
              pickerColorFlag : "black"})

              /*SAVE THE SELECTED VALUE IN STORE
              **THIS IS WHAT YOU NEED TO EDIT IF REUSING THIS COMPONENT** */
              this.props.saveJobType(itemValue)


          }
          else
          {
            this.setState({pickerColorFlag : "#C7C7CD"})
          }
        }


        }>

        <Picker.Item label={this.props.selectionMesg} value="0" color = "#C7C7CD" />
        {
          this.props.data.map((value, key) =>(
            <Picker.Item key = {key} label={value} value= {value} />
          ))
        }
      </Picker>


    )
  }
}


const styles = StyleSheet.create({
  container : {
    flex : 1,
    justifyContent : "center",
    alignItems : "center",
    backgroundColor : "blue",

  },
  picker : {
    width: "60%",
    marginTop : "5%",

  },
})

// const test = (state) => ({
//   selection : state.postJobData.type
// })

export default connect(null, {saveJobType : savePostJobType})(SelectList)

我正在将此组件导入屏幕 class，如下所示

import SelectList from "./customComponent/selectList.js";

class ScrrenTab extends React.Component {
render(){
<SelectList

        selectionMesg = "Select Job Type"
        data = {["electrician", "plumber", "carpenter", "painter"]}/>
<Button title = "Submit"/>
}
}

Answer 1

我试图从屏幕组件更新列表组件，但我所要做的就是将导航道具从屏幕组件发送到列表组件，并向其添加一个侦听器，并在列表出现时进行更改聚焦

在屏幕组件中

<SelectList
        navigation={this.props.navigation}
        selectionMesg = "Select Job Type"
        data = {["electrician", "plumber", "carpenter", "painter"]}/>

并且在 SelectList 中我不得不添加这些方法

    componentDidMount() {
    this._unsubscribe = this.props.navigation.addListener('focus', () => {
      console.log("List Mounted")
      this.setState({val : ""})
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

如何在 React Native 中重置选择器的选定值

How do I reset the selected value of a Picker in React Native

picker

react-native

expo