formik 库中的自定义 onChange (REACT)答案

【问题标题】：custom onChange in fromik library (REACT)formik 库中的自定义 onChange (REACT)
【发布时间】：2021-10-16 19:55:30
【问题描述】：

我是 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中的值

【问题讨论】：

标签： reactjs formik

【解决方案1】：

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

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

【讨论】：