如何使用formik react js在handlesubmit函数中接收选择值？

Posted 2023-02-22

【中文标题】如何使用formik react js在handlesubmit函数中接收选择值？

【英文标题】：How to receive select value in handlesubmit function with formik react js?

【发布时间】：2018-10-24 21:59:29

【问题描述】：

我正在使用 formik 插件 plugin link 在 reactjs 中开发一个表单。当我提交表单时，我得到了文本字段值，但下拉值是空的......

这是我的下拉选择

<div className="form-group">                  
                <Field component="select" id="category" name="category" value=this.state.value className="form-control" onChange= this.handleChange >
                   <option value="lokaler">Lokaler</option>
                   <option value="jobb">Jobb</option>
                   <option value="saker-ting">Saker & ting</option>
                   <option value="evenemang">Evenemang</option>
                </Field>
                  </div>

处理提交功能

export default withFormik(
  enableReinitialize: true,
  mapPropsToValues( category ) 
    return       
      category: category || ''
    
  ,
    handleSubmit(values,  setStatus, setErrors )
      console.log("data is this: "); 
      console.log(values); //here i am getting all form fields values except select value returning empty value
      console.log("category: "+values.category);// here i always get empty value but not getting selected value

      

我在句柄提交函数中获取所有文本字段值，但我无法获取下拉选择值....请告诉我如何在句柄提交函数中获取下拉选择值？

【参考方案1】：

在使用 Formik 时处理选择组件的一种更强大的方法是同时使用 Jed Watsons react-select 组件。两者可以很好地协同工作，并抽象出您通常需要实现的大量样板，以使组件与 Formik 无缝工作。

我从Jared Palmer's react-select / Formik example 在代码和框上分叉了一个简单的示例，并对其进行了调整以反映您上面的代码。

import "./formik-demo.css";
import React from "react";
import  render  from "react-dom";
import  withFormik  from "formik";
import Select from "react-select";
import "react-select/dist/react-select.css";

const options = [
   value: "lokaler", label: "Lokaler" ,
   value: "jobb", label: "Jobb" ,
   value: "saker-ting", label: "Saker & ting" ,
   value: "evenemang", label: "Evenemang" 
];

const MyForm = props => 
  const 
    values,
    handleChange,
    handleBlur,
    handleSubmit,
    setFieldValue
   = props;
  return (
    <form onSubmit=handleSubmit>
      <label htmlFor="myText" style= display: "block" >
        My Text Field
      </label>
      <input
        id="myText"
        placeholder="Enter some text"
        value=values.myText
        onChange=handleChange
        onBlur=handleBlur
      />
      <MySelect value=values.option onChange=setFieldValue />
      <button type="submit">Submit</button>
    </form>
  );
;

class MySelect extends React.Component 
  handleChange = value => 
    // this is going to call setFieldValue and manually update values.topcis
    this.props.onChange("option", value);
  ;
  render() 
    return (
      <div style= margin: "1rem 0" >
        <label htmlFor="color">Select an Option </label>
        <Select
          id="color"
          options=options
          onChange=this.handleChange
          value=this.props.value
        />
      </div>
    );
  


const MyEnhancedForm = withFormik(
  mapPropsToValues: props => (
    myText: "",
    option: 
  ),
  handleSubmit: (values,  setSubmitting ) => 
    console.log(values);
  
)(MyForm);

const App = () => <MyEnhancedForm />;
render(<App />, document.getElementById("root"));

---

有一些问题，你必须包含 react select css 组件才能正确显示

import "react-select/dist/react-select.css";

函数 mapPropsToValues 选项字段应该初始化为一个对象

 mapPropsToValues: props => (
    myText: "",
    option: 

最后是codeandbox示例的链接

【讨论】：

为了澄清，我将您的类别字段重命名为选项。因此，当您在我的示例中看到选项时，它实际上是指您的类别字段。

为什么这是一种更健壮的方式？ react-select 非常固执己见（有很多样式），所以这不是这个问题的真正答案。

【参考方案2】：

我昨天也遇到了这个问题。我的问题是提交包含 ant design 下拉列表的表单。我终于在几个小时后让它工作了：

重访Formik Docs 再次观看 Andrew Mead 的视频Better React Form with Formik。 还查看 Jared Palmer 的 Working with 3rd-party inputs #1: react-select

文档说你需要将 onChange、onBlur 事件分别设置为 setFieldValue、setFieldTouched 属性，如 3rd -party输入示例：

<MySelect
    value=values.topics
    onChange=setFieldValue
    onBlur=setFieldTouched
    error=errors.topics
    touched=touched.topics
/>

所以对于我的问题，我需要改变一下：

<Select
  ...field
  onChange=(value) => setFieldValue('fruitName', value)
  onBlur=()=> setFieldTouched('fruitName', true)
  value=values.fruitName
  ...
>
...
</Select>

希望这会有所帮助。

这是我的CodeSandbox