Блог

Главная - Вопросы по программированию - Использование входных данных в представлении списка React-admin

Использование входных данных в представлении списка React-admin

#reactjs #react-admin

#reactjs #react-admin

Вопрос:

Я пытаюсь выполнить вызов обновления из представления списка в react-admin. Я могу выполнить вызов, но состояние ввода не синхронизируется с обновленным списком. Что я мог здесь делать не так? Пожалуйста, найдите ниже мой компонент списка и компонент ввода. Кроме того, если есть лучшие способы сделать это, например, включить входные данные в представление списка, было бы очень полезно выделить их. Я хочу ввести значение позиции в списке, которое изменяет порядок списка. Спасибо!

  const ProductsList = props => {
    const refresh = useRefresh();
    const notify = useNotify();
    const [update] = useUpdate("position", "");

    const updatePosition = data => {
        update(
            {
                payload: { data: { ...data } }
            },
            {
                onSuccess: () => {
                    refresh();
                    notify("Position Updated", 2000);
                }
            }
        );
    };

    return <ListBase
                 exporter={false}
                 bulkActionButtons={false}
                 sort={{ field: "position", order: "ASC" }}
                 basePath='/position'
                 resource='position'
                 {...props}
    >
            <Datagrid rowClick={null}>
                <TextField source="type" sortable={false} />
                <PositionEdit source="position" sortable={false} updatePosition={updatePosition}/>
            </Datagrid>
            <Pagination />
        <Button
            color="primary"
            component={Link}
            to="/categories"
        >
            Back to Categories
        </Button>
        </ListBase>
};

const PositionEdit = props => {
    const { category_id, id, type } = props.record;
    const [showSubmit, setSubmitVisibility] = useState(false);
    const [position, setPosition] = useState("");

    const onFocusHandler = () => setSubmitVisibility(true);
    const onBlurHandler = () => {
        setSubmitVisibility(false);
        onClickHandler();
    };
    const onClickHandler = () => {
        const data = { category_id, product_id: id, position, type};
        props.updatePosition(data)
    };

    const onChangeHandler = e => setPosition(e.target.value);

  return <Input
      id={`position-${props.record.id}`}
      defaultValue={props.record.position}
      InputLabelProps={{
          shrink: true,
      }}
      onFocus={onFocusHandler}
      onBlur={onBlurHandler}
      onChange={onChangeHandler}
  />
};

Комментарии:

1. Не могли бы вы уточнить, какой ввод не синхронизируется? После выполнения вызова update и обновления списка разве поле в измененной строке не отображает новое значение?

2. @KiaKaha поле ввода компонента PositionEdit не получает обновленных значений, несмотря на то, что список переупорядочивается в соответствии с новыми позициями после вызова update. таким образом, по сути, есть два входа с одинаковым значением позиции.

3. Откуда импортируется <Input /> компонент и где вы устанавливаете его value равным position ? За исключением defaultValue в начале.

4. @KiaKaha ааа, понял! Спасибо, что решил проблему!

5. Рад, что это помогло — я отправил его как ответ, чтобы вы могли закрыть вопрос.

Ответ №1:

У <Input /> компонента нет value свойства, равного переменной position состояния, и, следовательно, он не обновляется с изменяющимися значениями.