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>
);