问题描述
在“创建公司”页面上，用户必须在其中输入由Formik和Yup验证的某些字段中的数据才能创建条目。所有字段均为必填。
问题在于字段不是通过在输入内部编写而引入的，而是从下拉列表中选择的。无论选择什么，都不会使用该值，也不会创建表示该字段为必填项的条目。
这是代码：
<?PHP
public function getPaymentLink (Request $request,$hash){
$budgetId = $hash;
// further code goes here
}
有什么主意为什么对import React from 'react';
import { Formik,Form,Field } from 'formik';
import { Input,Button,Select,Label,Grid } from 'semantic-ui-react';
import * as Yup from 'yup';
class CreateCompanyForm extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
name: '',industry: '',};
}
handleSubmitCreate = e => {
e.preventDefault();
const { createCompany,getCompanies } = this.props;
createCompany(this.state);
this.setState({ redirectCreate: true });
getCompanies(this.props.query);
};
render() {
const industryOptions = [
{ text: 'Retail',value: 'Retail' },{ text: 'Food',value: 'Food' },];
const initialValues = {
name: '',};
const requiredErrorMessage = 'This field is required';
const validationSchema = Yup.object({
name: Yup.string().required(requiredErrorMessage),industry: Yup.string().required(requiredErrorMessage),});
return (
<Layout create>
<OneColumn>
<div>
<Button type="submit" form="amazing">
Create company
</Button>
</div>
</OneColumn>
<Formik
htmlFor="amazing"
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={values => this.handleSubmit(values)}>
{({ values,errors,touched,setValues }) => (
<Form id="amazing">
<Grid columns={2}>
<Grid.Column>
<Label>Company Name</Label>
<Field name="name" as={Input} placeholder="Hello" />
<div>{touched.name && errors.name ? errors.name : null}</div>
</Grid.Column>
<Grid.Column>
<Label>Industry</Label>
<Field
name="industry"
as={Select}
options={industryOptions}
placeholder="Food service"
/>
<div className="add-fridge-error">
{touched.industry && errors.industry
? errors.industry
: null}
</div>
</Grid.Column>
</Grid>
</Form>
)}
</Formik>
</Layout>
);
}
}
的输入有效，而对于name的Select却行不通？
解决方法
它不适用于Select，因为Formik不知道如何设置它的值。
您需要自己实施：
<Field
name="industry"
as={Select}
options={industryOptions}
placeholder="Food service"
onChange={(e) => setFieldValue("industry",e.target.value)}
/>
从setFieldValue渲染道具中解构Form。