fromik 库中的自定义 onChange (REACT)

Question

我是 formik 库的新手，我已经成功实现了问题是我有一个自定义组件可供选择，我似乎可以让它与 formik 一起工作。

这是我的实现：

const formik = useFormik({
initialValues: {
  title: "",
  message: "",
  selected: [],
},
validate,
onSubmit: (values) => {
  console.log("SUBMITTED: ", values);
},


 });

  ...



<form onSubmit={formik.handleSubmit}>
       ...
            <Col>
              <Select
                isDisabled={
                  formik?.values?.selected?.includes("All") ? true : false
                }
                isMulti
                name="users"
                options={options}
                className="basic-multi-select"
                classNamePrefix="select"
                // onChange={(value) => setSelected(value)}
                onChange={formik.handleChange}
              />
              {formik.errors.selected ? (
                <div className="form-error">{formik.errors.selected}</div>
              ) : null}
            </Col>
          </div>
          <Button
            size="lg"
            color="warning"
            className="notification-send-button"
            type="submit"
            onClick={formik.handleSubmit}
          >
            SUBMIT
          </Button>
        </form>

自定义组件是 <Select> 并且想知道如何在 formik 更改时更改值

Answer 1

如果不查看组件 <Select> 的代码，很难知道这是否有效，但由于它是自定义输入，因此您需要将其与 setFieldValue():

<Select
  onChange={(value) => formik.setFieldValue('selected', value)}
  //... other props
/>

fromik 库中的自定义 onChange (REACT)

custom onChange in fromik library (REACT)

reactjs

formik