CODEWITHSUNDEEP
javascriptreactjsreact-admin
Brad
Brad

Reputation: 25

Adjust a simple form fields value with a button

First of all I'm very new to react-admin.

I've got a SimpleForm which populates a bunch of fields from an API call -

<SimpleForm noValidate toolbar={<PostEditToolbar />}>
      <TextInput source="minute" label="Minute" />
      <TextInput source="hour" label="Hour" />
      <TextInput source="day" label="Day" />

I want to include some buttons on this edit page which will set the values of these fields, and I've done the following:

 <Button class="btn btn-success"
       onClick={() => { document.getElementById("hour").value = '1'; }}
      label="Weekly">

The button updates the field, but as soon as you click in the input field it reverts back to the previous entered value (even if you don't save it). If you click save, it'll just revert back to the previous values as well.

Any ideas on how to achieve this?

Entire code:

export const BackupconfigEdit = (props) => (
  <div>
  <Edit {...props}>

    <SimpleForm noValidate toolbar={<PostEditToolbar />}>
      <TextInput source="minute" label="Minute" />
      <TextInput source="hour" label="Hour" />
      <TextInput source="day" label="Day" />
      <TextInput source="month" label="Month" />
      <TextInput source="week" label="Week" />
      <Button class="btn btn-success"
       onClick={() => { document.getElementById("hour").value = '1'; document.getElementById("minute").value = 0; document.getElementById("day").value = 0; document.getElementById("month").value = 0; document.getElementById("week").value = 0;}}
      label="Weekly">
    </Button>

    </SimpleForm>
  </Edit>
  </div>
);

Upvotes: 1

Views: 1111

Answers (1)

Fran&#231;ois Zaninotto
Fran&#231;ois Zaninotto

Reputation: 7335

With React, you don't change the DOM imperatively (as you did with document.getElementById("hour").value = '1'). Instead, you update a model that React automatically renders into the DOM.

In the case of forms in react-admin, the model is handled by a library called react-hook-form. This library exposes a hook allowing to manipulate the form value, called useFormContext. You need to call this hook to change an input value:

import * as React from "react";
import { Edit, SimpleForm, TextInput } from "react-admin";
import { Button } from "@mui/material";
import { useFormContext } from "react-hook-form";

const WeeklyButton = () => {
  const { setValue } = useFormContext();
  return (
    <Button
      onClick={() => {
        setValue("hour", "1");
        setValue("minute", 0);
        setValue("day", 0);
        setValue("month", 0);
        setValue("week", 0);
      }}
    >
      Weekly
    </Button>
  );
};

const BackupconfigEdit = () => (
  <div>
    <Edit>
      <SimpleForm noValidate>
        <TextInput source="minute" label="Minute" />
        <TextInput source="hour" label="Hour" />
        <TextInput source="day" label="Day" />
        <TextInput source="month" label="Month" />
        <TextInput source="week" label="Week" />
        <WeeklyButton />
      </SimpleForm>
    </Edit>
  </div>
);

export default BackupconfigEdit;

Check the react-hook form documentation for details (https://react-hook-form.com/)

Upvotes: 3

Related Questions