在 React-admin 列表视图中使用输入

Question

我正在尝试从 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}
  />
};

Answer 1

<Input /> 组件没有 value 属性设置为等于 position 状态变量，因此不会随着值的变化而更新。

在 React-admin 列表视图中使用输入

Using Inputs in React-admin list view

reactjs

react-admin