在提交之前更改/更改表单值答案

【问题标题】：Change/altering the form value before submit在提交之前更改/更改表单值
【发布时间】：2023-07-19 19:34:01
【问题描述】：

我们正在使用react-admin react-admin docs

我有一个包含productName, Price and Image 字段的表单。图片字段为字符串类型，表示将图片上传到s3或任何其他目的地，并将上传的图片URL动态传递给图片字段。

我正在使用将图像上传到 s3 的功能，现在我正在获取 s3 URL，用户将填写 ProductName and Price 字段并点击提交。当表单提交时，我想传递图像 URL 以及其他字段。

以上是我想要达到的要求。让我向你解释一下我的尝试。

我正在关注此链接link。

ProductCreate.js

export class ProductCreate extends Component{

render(){

    return (
        <Create {...this.props}>
            <SimpleForm toolbar={<PostCreateToolbar />} redirect="show">                    
                <TextInput source="name" />
                <TextInput source="price"/>
            </SimpleForm>
        </Create>
    )
}
}

在上面的代码中，你可以看到我在SimpleForm 上使用了toolbar 道具和名为PostCreateToolbar 的自定义工具栏。

PostCreateToolbar.js

const PostCreateToolbar = props => (
<Toolbar {...props}>
    <SaveWithNoteButtonView
        label="Save"
        redirect="show"
        submitOnEnter={false}
        variant="contained"
    />
</Toolbar>
);

SaveWithNoteButtonView.js

class SaveWithNoteButtonView extends Component {    

handleClick = () => {
    const { basePath, handleSubmit, redirect } = this.props;

    const form = useForm();

    console.log("123", this.props);
    return handleSubmit(values => {
        console.log("456", this.props);
        crudCreate('posts', { ...values, imageUrl: "https://s3.us-east-1.amazonaws.com/..." }, basePath, redirectTo);
    });
};

render() {
    const { handleSubmitWithRedirect, saveWithNote, ...props } = this.props;

    return (
        <SaveButton
        handleSubmitWithRedirect={this.handleClick}
        {...props}
        />
        );
    }
}

在SaveWithNoteButtonView 文件中，您可以看到我有handleClick 函数，当用户单击保存按钮时，该函数将调用但handleSubmit 未被调用。当用户单击保存按钮时，我可以看到第一个控制台，但看不到 handleSubmit 内的第二个控制台。可能是发生 API 调用时的问题，我无法发送 imageUrl 字段。

在提交之前，任何人都可以通过其他方式传递自定义数据，我愿意了解。

还有一种方法，我认为在产品表单中我可以禁用 imageURL 字段，当图像上传到 s3 并获取 URL 时，然后以某种方式用 imageURL 值填充 imageURL 字段。所以当我们提交一个表单 imageURL 字段值传递给 api。如果您知道如何实现这一点，那将会很有用。

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

为什么使用类而不是函数？ useForm 是一个 Hook，必须在功能组件内部使用。

再次查看他们的示例。 useForm 处理表单的数据。尝试使用 console.log(form)，另外，您可以使用 useForm 方法 .change()，在提交之前更改其值。

如果您相应地遵循他们的示例，他们的示例将非常有效。尝试模拟他们的代码，并仅更改要添加的图像值。您不应该使用 CRUDcreate，因为 react-admin 会自动处理保存。

【讨论】：