react-final-form - react-dates integration

0
votes

I cannot integrate react-dates with react-final-form.

If I add an onChange callback to react-dates' component, using change(name, value) function from the form, the name is not saved to the form state (I suppose because the field has to be registered before using change).

Is it possible to register manually a field?

edit: I found a way, adding an hidden Field, but I don't like that...

edit 2: adding a test form:

Edit ???? React Final Form - Simple Example

3
reactjsreact-datesreact-final-formfinal-form
Please provide the code you tried to expedite a good answer. - Mickers
@Mickers example added, you can see that "A" works with Field or with input with change, "B" is not working, because is not registered inside the state - avalla
Check out my answer it works. - Eddsters

3 Answers

0
votes

You must use form from FormRenderProps to do this.

「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>
  )}
/>
-1
votes

You can wrap it inside of Field to make final-form's state aware of the b field:

<Field
  name="b"
  render={() => {
    return (
      <input
        type="text"
        onChange={event => {
          console.log("changing b to", event.target.value);
          change("b", event.target.value);
        }}
      />
    );
  }}
/>

in the case above you don't need to specify special onChange handler:

<Field
  name="b"
  render={({ input }) => {
    return <input type="text" {...input} />;
  }}
/>

or even

<Field name="b" component="input" />
-1
votes

This worked for me:

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>