从formik

Question

我在我的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>
  )
}
}

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

Answer 1

我认为建议的最佳实践是仅使用Formik状态，以避免将状态存储在2个位置（Formik +组件状态）中的任何副作用。我也在寻找实现您想要的东西的方法，并找到了以下组件-https://github.com/jaredpalmer/formik-effect-可用来装饰class Example extends Component { handleValues(values) { // Do something with values } render() { return ( <Formik> ({values}) => {<button onClick={() => this.handleValues(values)}>Do something</button>} </Formik> ); } } 函数。但是，在阅读了该组件的自述文件之后，我决定仅使用Formik状态并将其值传递给该状态下需要值的任何函数。

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

CREATE TABLE "usu"."mytable" (  
"first_name" CHAR(8 BYTE) DEFAULT ' ',  
"last_name" CHAR(8 BYTE) DEFAULT ' ',  
"regist" TIMESTAMP (0) DEFAULT SYS_EXTRACT_UTC(SYSTIMESTAMP)  
) TABLESPACE "temp" ;  

Answer 2

您可以像下面这样在类组件上执行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>
    );
  }
}

Answer 3

如果在输入状态时不需要状态更改，那么我想说最好的选择是使用onSubmit函数来更新状态。这也意味着它将在状态更新之前通过验证。听起来您具有默认的验证功能，因此您还可以添加validate属性，并使用它来调用验证程序。

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

  render() {
    return(
      <Formik
        initialValues={values}
        onSubmit={(values) => {
          // Set updated state here
        }}
        render={({
            submitForm
          }) => (
          <form onSubmit={submitForm}>
            <Field type="text" name="address" onChange={handleChange} />
            <button type="submit">Submit</button>
          </form>
        )}
      />
    )
  }
}