Je suis nouveau pour réagir.
J'essaie d'utiliser la bibliothèque ci-dessous pour utiliser la liste déroulante.
Lorsque j'ai ajouté l'attribut "obligatoire", il ne le valide pas avec la balise form.
/ p>
https://www.npmjs.com/package/react-select
import React from 'react';
import Select from 'react-select';
const options = [{
value: 'chocolate',
label: 'Chocolate'
},
{
value: 'strawberry',
label: 'Strawberry'
},
{
value: 'vanilla',
label: 'Vanilla'
},
];
class App extends React.Component {
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState({
selectedOption
});
console.log(`Option selected:`, selectedOption);
};
render() {
const {
selectedOption
} = this.state;
return ( <
Select value = {
selectedOption
}
onChange = {
this.handleChange
}
options = {
options
}
//required
/>
);
}
}
Quand je l'ai regardé depuis la console, cela montre que la balise d'entrée est enveloppée avec un tas de div. Existe-t-il un moyen d'accéder à l'entrée du composant? ou y a-t-il un code javascript auquel je peux accéder à la balise d'entrée afin de l'ajouter directement?
3 Réponses :
J'ai fait un petit exemple d'utilisation du formulaire Ant-Design, vérifiez que sur codesandbox
import React from "react";
import { Form, Select, Button } from "antd";
import "./styles.css";
import "antd/dist/antd.css";
const { Option } = Select;
const AppWithForm = props => {
const { getFieldDecorator } = props.form;
const handleSubmit = () => {
props.form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
} else console.log("form is NOT valid");
});
};
const onChange = value => {
console.log(`selected ${value}`);
};
return (
<div className="App">
<Form layout="inline">
<Form.Item>
{getFieldDecorator("dropdown", {
rules: [{ required: true, message: "Please select a person!" }]
})(
<Select
showSearch={false}
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
)}
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSubmit}>
Save
</Button>
</Form.Item>
</Form>
</div>
);
};
const App = Form.create({})(AppWithForm);
export default App;
vous devriez envelopper votre composant avec ant-design Form HOC, il passe beaucoup de fonctions comme un accessoires à votre composant afin que vous puissiez gérer votre formulaire avec eux en utilisant 'getFieldDecorator', 'validateFields'
Vous devez utiliser une bibliothèque de formulaires comme Formik et utiliser Yup pour la validation de formulaire. Yup dispose de méthodes de validation puissantes et est entièrement pris en charge par Formik. Vous pouvez également écrire votre propre schéma de validation.
regardez ce lien: https : //codesandbox.io/s/react-hook-form-controller-079xx? file = / src / index.js
vous devez utiliser Controller
import Select from "react-select";
import { Controller, useForm } from "react-hook-form";
---------------------------------
const { register, handleSubmit, errors, control } = useForm();
<Controller
control={control}
rules={{ required: true }}
name="citySelect"
render={({}) => (
<Select
options={citiesOption}
value={city}
onChange={handleCity}
className="basic-single"
classNamePrefix="select"
isRtl
placeholder="استان مورد نظر"
/>
)}
/>
{errors.citySelect && <p>choise a city</p>}
Je pense que vous devriez utiliser la bibliothèque pour créer un composant de formulaire comme 'formik', cette bibliothèque valide vos formulaires
De nombreux développeurs React utilisent-ils cette bibliothèque?
en fait, j'utilise la conception de fourmis comme un ensemble de composants, qui a une forme HOC
Il existe une solution temporaire ici github.com/JedWatson/react-select/ problèmes /…
Je vais essayer d'utiliser formik et voir ce qui se passe merci à tous