用按钮调整一个简单的表单字段值

Question

首先，我是react-admin的新手。

我有一个SimpleForm填充一堆字段从API调用-

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

我想在这个编辑页面上包含一些按钮，这些按钮将设置这些字段的值，我已经做了以下工作:

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

按钮更新字段，但是一旦您单击输入字段，它就会恢复到以前输入的值(即使您没有保存它)。如果你点击保存，它也会恢复到之前的值。

对如何实现这一点有什么想法吗?

整个代码:

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

Answer 1

使用React，您不需要强制更改DOM(就像使用document.getElementById("hour").value = '1'那样)。相反，你更新一个模型，React会自动渲染到DOM中。

对于react-admin中的表单，模型是由一个名为react-hook-form的库处理的。这个库公开了一个允许操作表单值的钩子，称为useFormContext。你需要调用这个钩子来改变输入值:

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;

查看react-hook表单文档获取详细信息(https://react-hook-form.com/)