React Formik 默认值

Question

我正在使用 React formik。我有一个下拉选择选项。选项工作正常，但我希望从下拉列表中将默认值设置为“免费”。如果我在没有点击的情况下提交表单，它会给我的选项值为空白。下面是我的代码：

const defautValue="Free";
const options=["Premium","Gold","Free"]


<Field> 
  {(props: any)=>{
    const {field}=props;
    const defaultOption=<option key='default' value={defaultValue}>{defaultValue}</option>
    const option=options.map((i:string)=>{return (<option key={i} value={i}>{i}</option>)})
    const selectOptions=[defaultOption,...option]
    return (
       <div>
       <select value={field.value}{...field}>{selectOptions}</select>
       </div>
         )
  }}
</Field>

Answer 1

您可以将enableReinitialize选项设置为 true

你的福米克钩子

const formik = useFormik({
        enableReinitialize: true,
        initialValues: $yourState
})

Answer 2

尝试删除 defaultOption、selectOptions 的手动设置，并使用formik.values、 或form.value，并使用组件的 来设置defaultValue组件initialValues的Formik：

<Formik
  initialValues={{selectedOption: "Free"}: YourFormData}
  onSubmit={(values, actions) => {console.log(values, actions)}}
>
  {formik => (
    <Form translate="yes">
      <Field name="selectedOption">
          {({ form, field }: FieldProps<YourFormData>) => {
          const options=["Premium","Gold","Free"].map((i:string)=>{return (<option key={i} value={i}>{i}</option>)})    
          return (
             <div>
                 <select {...field}>{options}</select>
             </div>
               )
        }}
      </Field>
    </Form>
    )}
</Formik>

field 的展开运算{...field}符已经添加了“值”

<Field name="selectedOption">自动将selectedOptionformik 字段连接到<select>元素，包括onChange、onBlur、touched等。

或者您也可以使用as例如：

<Formik
    initialValues={{selectedOption: 'Free'}}
    onSubmit={(values, actions) => {
        setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
        }, 1000);
    }}>{(props: FormikProps<any>) => (
    <Form>
        <Field as="select" name="selectedOption">
           {["Premium","Gold","Free"].map((i:string)=>(<option key={i} value={i}>{i}</option>))}
        </Field>
    </Form>
)}
</Formik>

文档：

• https://jaredpalmer.com/formik/docs/api/field

Answer 3

您将键设置为“默认”，但将值和innerHTML设置为{defaultValue}，我在任何地方都没有看到它的定义。如果 defaultValue 未定义，这可能会导致空白。

此外，您还覆盖了内部作用域中的defaultOption，因为它已经在外部作用域中定义了