使用 Formik 的 React-Native 选择器

Posted 2023-02-25

【中文标题】使用 Formik 的 React-Native 选择器

【英文标题】：React-Native Picker with Formik

【发布时间】：2017-12-24 15:00:12

【问题描述】：

我的基本表单工作正常，但是，由于 react-native 有一些警告，我可以使用一些帮助来了解问题是我如何使用 formik，还是将它与 react-native 一起使用。

在这个特定的表单中，当我尝试使用 formik 在 react-native 中填写选择器时，表单会在我选择一个选项后立即将选择器重置为原始值。我已经剥离了代码，因为我觉得有人应该在没有大量代码的情况下得到答案，但我没有看到我缺少的东西。谢谢。

<Formik
    onSubmit=
    props.onSubmit(props.values)
  

  mapPropsToValues = (props) => (
    id: props.id,
    status: props.status
  )

  validate=values => 
    // same as above
    let errors = ;
    return errors;
  

  onValueChange= (itemIndex) => 
    this.props.values.status = itemIndex
  

  render=  props => (
    const  id, status  = this.props
    <View>
      <Text style=styles.textResultsHeaderStyle>Job: id</Text>
      <Picker
        selectedValue=status
        onValueChange=itemIndex => this.onValueChange>
        <Picker.Item label="New" value="0" />
        <Picker.Item label="Requested" value="1" />
        <Picker.Item label="Responded" value="2" />
        <Picker.Item label="Closed" value="3" />
      </Picker>
      <RoundedButton disabled=props.isSubmitting onPress=props.handleSubmit text="SUBMIT" />
    </View>
  )
/>

【问题讨论】：

问题是selectedValue=status 不保存选定的值。它可能未定义。

【参考方案1】：

我刚刚在 github 上回答了一个类似的问题。我想您正在使用 RN 中的内置选择器组件。 如果没有，那么您需要查看您的选择器组件的文档以了解如何获取更改值。https://github.com/jaredpalmer/formik/issues/1378#issuecomment-480189488