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

Question

我正在尝试在 React admin 中创建一个简单的表单，用于获取用户的国家和语言选项然后使用根据用户选择构建的 link 重定向到第 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"
               
            />

Answer 1

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

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

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

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

react-admin redirect button with parameters from form

redirect

button

react-admin