我们正在使用react-admin
react-admin docs
我有一个包含字段productName, Price and Image
的表格。图片字段具有字符串类型,这意味着将图片上传到s3或任何其他目标,并将上传的图片网址动态传递到图片字段。
我具有将图片上传到s3的功能,现在我获取s3 URL,用户将填写ProductName and Price
字段并点击Submit。当表单提交时,我也希望将图像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>
)
}
}
在上面的代码中,您可以看到我在toolbar
上使用了SimpleForm
道具和名为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。如果您知道如何实现这一点,那将很有用。
答案 0 :(得分:0)
为什么使用Class而不是Functions? useForm
是一个挂钩,必须在功能组件内部使用。
再次检查他们的示例。 useForm
处理表单的数据。尝试使用console.log(form),也可以使用useForm
方法.change()
来更改其值,然后再提交。
如果您相应地遵循示例,则它们的示例将非常适用。尝试模拟他们的代码,并仅更改要添加的图像值。您不应该使用CRUDcreate,因为react-admin会自动处理保存。