jquense / react-formal

Sophisticated HTML form management for React
http://jquense.github.io/react-formal
MIT License
526 stars 52 forks source link

mapFromValue does not work, sends syntheticEvent instead of value #156

Open atomicleads opened 5 years ago

atomicleads commented 5 years ago

Example:

 <Form.Field
                id="eMail"
                name="eMail"
                placeholder="Email"
                className="form-control"
                autoComplete="email"
                errorClass="is-invalid"
                value={model.Email}
                mapFromValue={
                  emailValue => {
                    console.log("email value: ", emailValue);
                    return emailValue;
                  }
                }
              />

mapFromValue does not work as expected and as written in documentation:

<Form.Field
  name='name'
  mapFromValue={fieldValue => fieldValue.first + ' ' + fieldValue.last}
/>

fieldValue in this example is received as syntheticEvent.

email value:  SyntheticEvent {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: InputEvent, type: "change", target: input#eMail.form-control, …}
atomicleads commented 5 years ago

Forgot to add that it releated to version 1.0 and you can easily reproducit it by going to Examples and trying to enter date in appropriate example

jquense commented 5 years ago

These docs are a little out of date I think. React formal will automatically extract value from a synthetic event but if you do the mapping yourself you would need to handle it. In other words you whatever the input passed to onChange. In the case of default native input it's the change event