问题描述
我试图在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
状态变量,因此不会随着变化的值而更新。