Обновленное значение пользовательского ввода в React-Admin не отправляется в форме редактирования

Question

Я пытаюсь создать форму редактирования в React-Admin с настраиваемым полем ввода, называемым UserRolesSelect, который отображает список ролей из отдельной конечной точки ролей с выбранными ролями текущего пользователя. Однако при выполнении запроса на редактирование значения пользовательского ввода не обновляются в данных формы. Я предоставил образцы ответов от обеих вышеупомянутых конечных точек.

// sample response for getting user details by ID
const user = {
id:1,
name:'User1',
email:'user1@user.com',
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() - оба исходят из response-final-form , который является платформой Form, используемой внутренне для response-admin ,

Для вашего примера это будет что-то вроде:

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
    ...
};

В документации по activ-admin есть раздел, подробно объясняющий, как писать собственные формы, я предлагаю вам начать с чтения .

https://marmelab.com/react-admin/Inputs.html#writing -your-own-input-component

Также, похоже, вы пытаетесь воссоздать функцию, которая уже существует вact-admin. См. Документацию для ReferenceArrayInput.

https://marmelab.com/react-admin/Inputs.html#referencearrayinput