Reset controlled value of single individual input in form upon button click-CodePudding

My app gets initialized with a json payload of 'original values' for attributes in a task form. There is a shared state between various components through a context manager submissionState that also gets imported to this form component. This shared state is a copy of the original values json but includes any edits made to attributes in the payload. I would like to include individual 'reset' buttons for each input of the form which would update the shared state to the original value in the json payload. The original values get passed into the parent form component as props and the edited value state gets called from within the parent component as well.


const FormInput = ({ fieldName, fieldValue, onChange, originalValue }) => {

  const handleReset = e => {
    //????
  }

  return (
    <div>
      <label htmlFor={fieldName}>
        {fieldName}
      </label>
      <br />
      <input type="text"
        name={fieldName}
        value={fieldValue}
        onChange={onChange}/>
      <button id="reset" onClick={handleReset}>↻</button>
      <br />
      <div>{originalValue}</div>
    </div>
  );
};


const TaskForm = (payload: TaskPayload) => {
  const { submissionState, setSubmission } = useTask();

  function handleChange(evt) {
    const value = evt.target.value;
    setSubmission({
      ...submissionState,
      [evt.target.name]: value,
    });
  }

  const taskFields = ["name", "address", "address_extended", "postcode", "locality", "region", "website"];

  return (
    <div>
      <form>
        {taskFields.map((field) => {
              <FormInput
                key={field}
                fieldName={field}
                fieldValue={submissionState[field]}
                onChange={handleChange}
                originalValue={payload[field]}
              />
          })
        }
      </form>
    </div>
  );
};
export default TaskForm;

What I would like to do is include logic in the reset button function so that any edits which were made in a form input (from state) get reverted to the original value (stateless), which comes from the payload props: payload[field].

The form input is controlled through a global shared state submissionState, so the reset button logic can either modify the shared state itself with something like:

  const handleReset = (submissionState,setSubmissionState) => {
    setSubmission({
      ...submissionState,
      fieldName: originalValue,
    });

but I would need to pass the submissionState and setSubmission down through to the child component. It would be better if I can somehow update the value attribute in the input, which in-turn should potentially update the shared state? And the logic can just be something like this (assuming I can somehow access the input's value state in the reset button)

  const handleReset = (?) => {
    /*psuedo code:
      setInputValueState(originalValue)
     */
  }

CodePudding user response：

I would highly recommend using react-hook-form if it's an option. I've implemented it across several projects and it has never let me down. If it's just not possible to use a library, then keep in mind that React is usually unidirectional. Don't try to work around it, since it works that way by design for most cases you can encounter. Otherwise…

const TaskForm = (payload: TaskPayload) => {
  const { submissionState, setSubmission } = useTask();

  const upsertSubmission = (upsert) =>
    setSubmission({
      ...submissionState,
      ...upsert,
    });

  const handleChange = ({ target }) => {
    upsertSubmission({
      [target.name]: target.value,
    });
  };

  const reset =
    (originalValue) =>
    ({ target }) => {
      upsertSubmission({
        [target.name]: originalValue,
      });
    };
  /* Also something like this. RHF will handle most of this for you!
   * const reset = (originalValue, fieldName) =>
   *   upsertSubmission({[fieldName]: originalValue})
   */

  const taskFields = [];

  return (
    <div>
      <form>
        {taskFields.map((field) => (
          <FormInput
            key={field}
            fieldName={field}
            onChange={handleChange}
            reset={reset(originalValue)}
            value={submissionState[field]}
          />
        ))}
      </form>
    </div>
  );
};