Я прочитал это решение, но на самом деле это не отвечает на вопрос. Я использую formik и semantic-ui-react. Можно ли использовать Yup с semantic-ui-react? Если да, может ли кто-нибудь привести пример?
проверка формы semantic-ui-react с помощью Yup
Ответы (1)
да, это возможно, вот один из способов сделать это. вставьте этот код в codeandbox.io и установите зависимости, такие как formik yup и semantic-ui-react
import React from "react";
import { render } from "react-dom";
import { Formik, Field } from "formik";
import * as yup from "yup";
import { Button, Checkbox, Form } from "semantic-ui-react";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const App = () => (
<>
<Formik
initialValues={{
firstname: "",
lastname: ""
}}
onSubmit={values => {
alert(JSON.stringify(values));
}}
validationSchema={yup.object().shape({
firstname: yup.string().required("This field is required"),
lastname: yup.string().required()
})}
render={({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit
}) => {
return (
<Form>
<Form.Field>
<label>First Name</label>
<input
placeholder="First Name"
name="firstname"
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Field>
{touched.firstname && errors.firstname && (
<div> {errors.firstname}</div>
)}
<Form.Field>
<label>Last Name</label>
<input
placeholder="Last Name"
name="lastname"
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Field>
{touched.lastname && errors.lastname && (
<div> {errors.lastname}</div>
)}
<Form.Field>
<Checkbox label="I agree to the Terms and Conditions" />
</Form.Field>
<Button type="submit" onClick={handleSubmit}>
Submit
</Button>
</Form>
);
}}
/>
</>
);
render(<App />, document.getElementById("root"));
person
Rahil Ahmad
schedule
05.04.2019
TypeError: _this.props.onSubmit is not a function
ошибка при отправке.
- person TheCoder; 15.04.2019
Я отредактировал ответ, включив атрибут onSubmit в ‹Formik› @TheCoder.
- person Rahil Ahmad; 16.04.2019
@RahilAhmad, есть ли способ отправить параметр для handlesubmit, который я могу позже получить в onsubmit?
- person Rishi Sahu; 18.02.2021
@RishiSahu, вы можете сделать эту часть начального состояния, таким образом, вы можете обновить это от помощников и получить его при отправке внутри, или вы можете вручную вызвать handleSumbit со значениями с любой другой вещью, которую вы хотите передать ti
- person Rahil Ahmad; 20.02.2021
@RahilAhmad Я пытался передать параметры в handleSubmit, но я не получаю эти параметры в функции onSubmit.
- person Rishi Sahu; 20.02.2021