Реакция-окончательная форма - реакция-интеграция дат
Я не могу объединить даты реакции с реакцией окончательной формы.
Если я добавлю обратный вызов onChange к компоненту реагирующих дат, используя функцию изменения (имя, значение) из формы, имя не будет сохранено в состоянии формы (я полагаю, потому что поле должно быть зарегистрировано перед использованием изменения).
Можно ли вручную зарегистрировать поле?
редактировать: я нашел способ, добавив скрытое поле, но мне это не нравится...
редактировать 2: добавление формы теста:
3 ответа
Для этого вы должны использовать форму из FormRenderProps.
「Form.change」
<Form
onSubmit={onSubmit}
initialValues={{ a: "a" }}
render={({
form, // Focus here and removed 「change」
handleSubmit,
reset,
submitting,
pristine,
values
}) => (
<form onSubmit={handleSubmit}>
<div>
<label>A Field</label>
<Field name="a" component="input" type="text" />
</div>
<div>
<label>A not Field</label>
<input
name="a"
type="text"
onChange={event => {
console.log("changing A to", event.target.value);
form.change("a", event.target.value); // Use form.change instead of change
}}
/>
</div>
<div>
<label>B not Field</label>
<input
name="b"
type="text"
onChange={event => {
console.log("changing b to", event.target.value);
form.change("b", event.target.value); // Use form.change instead of change
}}
/>
</div>
<div className="buttons">
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
<button
type="button"
onClick={reset}
disabled={submitting || pristine}
>
Reset
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
Вы можете обернуть его внутри Field
чтобы информировать государство окончательной формы о b
поле:
<Field
name="b"
render={() => {
return (
<input
type="text"
onChange={event => {
console.log("changing b to", event.target.value);
change("b", event.target.value);
}}
/>
);
}}
/>
в приведенном выше случае вам не нужно указывать специальный обработчик onChange:
<Field
name="b"
render={({ input }) => {
return <input type="text" {...input} />;
}}
/>
или даже
<Field name="b" component="input" />
Это сработало для меня:
import { SingleDatePicker } from 'react-dates'
// set a state
const [ date, setDate ] = useState(null);
// inside your render inside the react-final-form component
<Field name="date">
{({ input, meta }) => (
<>
<SingleDatePicker
readOnly
onOutsideClick={true}
numberOfMonths={1}
focused={focused}
date={date}
onDateChange={value => {
// you need to set the value to a formatted date
// because react-dates returns a moment object as the value
input.onChange(value.format('YYYY-MM-DD'))
setDate(value);
}}
onFocusChange={({ focused }) => {
setFocused(focused);
}}
/>
</>
)}
</Field>