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

尝试删除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 name="selectedOption">自动将selectedOption格式字段连接到<select>元素，包括onChange，onBlur，touched等。< / p>

或者您也可以使用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 2

您正在将密钥设置为“默认”，但您的值和innerHTML设置为{defaultValue}，我在任何地方都未定义。如果未定义defaultValue，则可能会导致空白。

您还重写了内部作用域中的defaultOption，因为它已在外部作用域中定义

Answer 3

您可以将 enableReinitialize 选项设置为 true

你的formik钩


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

Answer 4

    enableReinitialize // missing piece!!
    initialValues={props.initialValues}

在这里工作

反应Formik默认值

4 个答案: