Reactjs 将值从formik传递到状态

我在react应用程序中使用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>
  )
}
}

类myComponent扩展组件{
建造师（道具）{
此.state={
输入数据：{}
}
}
render（）{
返回(
{（{errors，handleChange，values}）=>(
console.log（值）；
)}
)
}
}

---

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

您可以在类组件上执行handleChange方法，如下所示：

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

  handleChange = (event) => {
     this.setState({
       inputData: event.target.value
     });
  }

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

类myComponent扩展组件{
建造师（道具）{
此.state={
输入数据：{}
}
}
handleChange=（事件）=>{
这是我的国家({
inputData:event.target.value
});
}
render（）{
返回(
{（{errors，handleChange，values}）=>{
console.log（值）；
返回(
);
}}
);
}
}

我认为推荐的最佳实践是仅使用Formik状态，以避免将状态存储在两个位置（Formik+组件状态）的任何副作用。我还希望实现您想要的功能，并找到了以下组件--它将允许您装饰

handleChange

函数。然而，在阅读了该组件的自述文件之后，我决定只使用Formik状态，并将其值传递给任何需要该状态中的值的函数

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

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

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

类示例扩展组件{
HandleValue（值）{
//用价值观做事
}
render（）{
返回(
（{values}）=>{this.handleValues（values）}>做点什么}
);
}
}

如果您不需要在输入状态时进行更改，那么我认为最好的选择是使用

onSubmit

函数来更新您的状态。这也意味着它将在状态更新之前通过验证。听起来您有一个默认的验证函数，因此您还可以添加

validate

prop并使用它调用您的验证器

类myComponent扩展组件{
建造师（道具）{
此.state={
输入数据：{}
}
}
render（）{
返回(
{
//在此处设置更新状态
}}
渲染={({
提交表格
}) => (
提交
)}
/>
)
}
}

您可以使用自定义onchange方法并将其设置为state这对我的案例来说是一个糟糕的解决方案，因为如果我更改handleChange方法，则需要定义验证函数。我的应用程序中有很多表单，所以我只需要一个默认验证函数。真的没有这样的方法将值传递给状态吗？或者从FormikWell开始，为了验证，您可以使用在Formik示例中看到的Yup库，对我来说，这是验证输入的最简单方法。因为Formik只将子函数中的

values

属性上的值作为函数传递，所以这是获取要验证的值的唯一方法。使用

onChange

方法是一种更好的做法，因为您可以在用户更改输入时进行验证，从而实时转换验证消息以获得更好的用户体验。如图所示，尝试在Formik上使用Yup。或者您也可以在Submit上使用验证。