时间戳

首页 > 解决方案 > 从 formik 向状态传递值

reactjs - 从 formik 向状态传递值

问题描述

我在我的反应应用程序中使用 formik 作为表单。

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

render() {
  return(
    <Formik>{({ errors, handleChange, values }) => (
      console.log(values);
      <Field type="text" name="address" onChange={handleChange} />
   )}
   </Formik>
  )
}
}

问题：我如何将值传递给状态？

标签： reactjsformik

解决方案

我认为推荐的最佳实践是只使用 Formik 状态，以避免将状态存储在 2 个位置（Formik + 组件状态）的任何副作用。我也在寻求实现您想要的功能，并找到了以下组件 - https://github.com/jaredpalmer/formik-effect - 可以让您装饰该handleChange功能。然而，在阅读了这个组件的 README 之后，我决定只使用 Formik 状态并将它的值传递给任何需要该状态内的值的函数。

要将值传递给函数，我使用了以下模式：

class Example extends Component {
    handleValues(values) {
        // Do something with values
    }

    render() {
        return (
            <Formik>
                ({values}) => {<button onClick={() => this.handleValues(values)}>Do something</button>}
            </Formik>
        );
    }
}

推荐阅读