Forem: Alex Blinov

onChange trigger example with React

Alex Blinov — Tue, 29 Oct 2019 09:52:36 +0000

Recently, I faced the issue. There is a form with some fields. Each field has several functions; functions do something. For example, one function writes the field name and its value into the object. Then the customer asks to add the buttons with specified values. When the button is clicked, the relevant field should update its value.
Here is the trigger hack that calls the onChange function of that field.

function triggerInput(enteredName, enteredValue) {
  const input = document.getElementById(enteredName);

  const lastValue = input.value;
  input.value = enteredValue;
  const event = new Event("input", { bubbles: true });
  const tracker = input._valueTracker;
  if (tracker) {
    tracker.setValue(lastValue);
  }
  input.dispatchEvent(event);
}

Live example link

Reset values in React Final Form w/ keepDirtyOnReinitialize

Alex Blinov — Wed, 03 Jul 2019 12:39:56 +0000

How to reset values with keepDirtyOnReinitialize in React Final Form after submitting.

The Issue

If keepDirtyOnReinitialize is applied to your form, then form.reset() no longer able to remove field's value.

The Solution

The Solution is simple— if the form submitted successfully: first change keepDirtyOnReinitialize to false -> perform form reset form.reset() -> and change keepDirtyOnReinitialize back to true.

<Form
  onSubmit={onSubmit}
  keepDirtyOnReinitialize
  render={({ handleSubmit, form }) => (
    <form
       onSubmit={(event) => {
       const promise = handleSubmit(event);
       promise && promise.then(() => {
         form.setConfig('keepDirtyOnReinitialize', false);
         form.reset();
         form.setConfig('keepDirtyOnReinitialize', true);
       })
      return promise;
      }}
    >
    ...
   </form>
}/>

Reset values in React Final Form

Alex Blinov — Wed, 03 Jul 2019 12:39:52 +0000

How to reset values in React Final Form after submitting

At first I wrote the following code:

<Form
  onSubmit={onSubmit}
  render={({ handleSubmit, form }) => (
    <form
      onSubmit={event => {
        handleSubmit(event).then(() => {
          form.reset();
        })
      }}
    >
    ...
    </form>
  }/>

If we implement a function like this, we will get an error "Uncaught TypeError: Cannot read property 'then' of undefined”, when we try to submit invalid form.
Invalid forms — form with validation errors.

The solution

To avoid this error, we need to place handleSubmit(event) to a variable, and if the variable is not undefined call .then().

onSubmit={(event) => {
  const promise = handleSubmit(event);
  promise && promise.then(() => {
    form.reset();
  })
  return promise;
}}

Custom onChange in React Final Form

Alex Blinov — Wed, 03 Jul 2019 12:21:49 +0000

Let's take a case when we need to call our own function to change a state of a specific field in a form (our react final form).

Here is a way to do the exact that:
You should pass your function as a parameter and after that just call it inside of the onChange method

Example:

const FormGroupAdapter = ({ input, inputOnChange }) => {
    const inputProps = {
        ...input,
        onChange: e => {
            input.onChange(e);
            inputOnChange && inputOnChange(e);
        }
    };

    return <input {...inputProps} />;
};

const handleChange = event => {
    console.log("!!!", event.target.value);
};

const App = () => (
    <Form
        ...
        render={({ handleSubmit, reset, submitting, pristine, values }) => (
            <form onSubmit={handleSubmit}>
                <div>
                    <label>some label</label>
                    <Field
                        name="someField"
                        component={FormGroupAdapter}
                        inputOnChange={handleChange}
                    />
                </div>
                ...
            </form>
        )}
    />
);

Live example

How to download files with Axios

Alex Blinov — Wed, 03 Jul 2019 12:21:17 +0000

A simple example using the Blob() constructor:

export function someFunction(values) {
  return (dispatch) => {
    ...
    const method = 'GET';
    const url = 'http://go.api/download_file';
    ...
    axios
      .request({
        url,
        method,
        responseType: 'blob', //important
      })
      .then(({ data }) => {
        const downloadUrl = window.URL.createObjectURL(new Blob([data]));
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', 'file.zip'); //any other extension
        document.body.appendChild(link);
        link.click();
        link.remove();
      });
  };
}