React-Admin中自定义输入的更新值未以编辑形式提交

Question

我正在尝试在React-Admin中使用一个名为'UserRolesSelect'的自定义输入字段来构建一个Edit表单，该字段显示来自单独角色端点的角色列表，其中当前用户的角色已被选定。但是，在发出编辑请求时，自定义输入的值不会在表单数据中更新。我提供了来自上述两个端点的样本响应。

// sample response for getting user details by ID
const user = {
id:1,
name:'User1',
email:'[email protected]',
created_at:2020-04-01T10:43:36.000000Z,
roles:[{id:1,name:'User'}]
};

// sample response of getting roles list
const roles = [
{id: 1,
name: 'user'},
{id: 2,
name: 'admin'}
]


const UserRolesSelect = ({ source, record }) => {
    const [selectedRoles, setRoles] = useState([]);

    useEffect(() => {
        const userRoles = record.roles.map(role => role.id);
        setRoles(userRoles);
    }, []);

    const { data, loading: rolesLoading, error: rolesError } = useQuery({
        type: 'getList',
        resource: 'roles',
    });

    if (rolesLoading) return <Loading />;
    if (rolesError) return <Error />;
    if (!data) return null;

    const rolesList = data.map(role => <MenuItem key={role.id} value={role.id} selected={selectedRoles}>
        {role.name}
    </MenuItem>);

    const handleChangeMultiple = event => {
        const { value: role } = event.target;
        const value = [...role];
        setRoles(value);
    };

    return <Select
        value={selectedRoles}
        onChange={handleChangeMultiple}
        multiple
    >
        {rolesList}
    </Select>
};

const UserEdit = props => {
    return <Edit {...props}>
            <SimpleForm >
                <TextInput source="name" />
                <TextInput source="email" />
                <UserRolesSelect source="roles"/>
            </SimpleForm>
        </Edit>
};

Answer 1

您的自定义元素会更新其内部状态，但不会将更改传达给外界。要更改表单值，您必须使用<Field>组件或useField()钩子-两者都来自react-final-form，这是react-admin在内部使用的Form框架。

例如，您会得到类似的内容：

const UserRolesSelect = ({ source }) => {
    const { input, meta } = useField(source);
    // the current value is in input.value
    // the callback to change the value is in input.onChange
    ...
};

react-admin文档中有一个部分详细说明了如何编写自定义表单，建议您先阅读它。
https://marmelab.com/react-admin/Inputs.html#writing-your-own-input-component
而且，您似乎正在尝试重新创建react-admin中已经存在的功能。请参阅ReferenceArrayInput的文档。
https://marmelab.com/react-admin/Inputs.html#referencearrayinput