我正在使用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
}
我在句柄提交功能中获取所有文本字段值但我无法获得下拉选择值....请告诉我如何在句柄提交功能中获取下拉选择值?
答案 0 :(得分:3)
昨天我也遇到了这个问题。我的问题是提交包含蚂蚁设计下拉列表的表单。经过数小时的努力,我终于使它工作了:
医生说,您需要将 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
答案 1 :(得分:0)
使用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示例的链接