带有表单参数的 react-admin 重定向按钮

编程问答 2022-05-14

问题描述

我正在尝试在 react admin 中创建一个简单的表单，用于收集国家和语言的用户选项 然后使用由用户选择构建的链接重定向到第 3 方网站。

// in LocationInput.js
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { useInput } from 'react-admin';

const LocationInput = props => {
    const {
        input,Meta: { touched,error }
    } = useInput(props);

    return (
        <Select
            label="Location"
            {...input}
        >
            <MenuItem value="GB">United Kingdom</MenuItem>
            <MenuItem value="SE">Sweden</MenuItem>
        </Select>
            <Select
            label="Language"
            {...input}
        >
            <MenuItem value="en_UK">English</MenuItem>
            <MenuItem value="sv_SE">Swedish</MenuItem>
        </Select>
     
    );
};
export default LocationInput;

const LocationEdit = props => (
    <Edit {...props}>
        <SimpleForm>
            <LocationInput
                source="location"
               
            />
**how do I add a button here to redirect to a link having parameters chosen by the user
ex: https://cnn.com/countryselected/languageselected. (the link is outside of my app in a 3rd party website)**
        </SimpleForm>
    </Edit>

稍后编辑。

我尝试使用官方文档中描述的重定向功能：https://marmelab.com/react-admin/CreateEdit.html#redirection-after-submission

然而，这似乎只是为了在内部重定向到 react-admin 路由，而不是重定向到根据用户在我的创建表单中输入构建的 URL 的外部网站。

const redirect = 'https://cnn.com';
...
const LocationEdit = props => (
    <Edit {...props}>
        <SimpleForm redirect={redirect}>
            <LocationInput
                source="location"
               
            />

解决方法

<SimpleForm> 用于编辑记录。在此示例中，您似乎并未尝试保留更改，而只是为了收集数据以稍后重定向用户。在这种情况下，我不会使用 <SimpleForm>，而是使用 react-final-form 的 <Form>（参见 https://final-form.org/docs/react-final-form/api/Form）。

至于 redirect 属性，它接受一个函数值，所以你通常可以这样写：

const redirect = (basePath,id,data) => `'https://cnn.com/location/${data.location}`;
...
const LocationEdit = props => (
    <Edit {...props}>
        <SimpleForm redirect={redirect}>
buttonbuttonbuttonreact-adminredirectredirect