reactjs - React Formik 默认值

Question

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

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

尝试删除 defaultOption 的手动设置，选择选项，然后使用 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 name="selectedOption">自动连接 selectedOption formik 字段高达 <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