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

如何解决在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}
  />
};

解决方法

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