在 react-admin 中显示编辑的值答案

【问题标题】：Show edited value in aside in react-admin在 react-admin 中显示编辑的值
【发布时间】：2020-05-04 10:02:23
【问题描述】：

我正在使用 react-admin 作为管理界面。在编辑表单之外，我想显示编辑后的值（只是为了了解如何捕获表单更改的值，稍后将显示来自 api 的这些更改值的数据）。我的代码如下（简体）

const Aside = ({ record }) => {
  return (
    <div style={{ width: 200, margin: '1em' }}>
        <Typography variant="h6">Student details</Typography>
        <Typography variant="body2">
        {record && (
            <Typography variant="body2">
                {//Will Show current ArrayInput values here, Name/role of current students}
            </Typography>
        )}
        </Typography>
    </div>
)};

export const MyEdit = (props) => (
  <Edit aside={<Aside />} {...props}>
      <SimpleForm>
        <ArrayInput source="students">
                <SimpleFormIterator>
                  <TextInput source="name" /
                  <NumberInput source="role" />
                </SimpleFormIterator>
              </ArrayInput>
      </SimpleForm>
  </Edit>
);

如何更新 ArrayInput 值的 onchange？

【问题讨论】：

标签： reactjs react-admin admin-on-rest

【解决方案1】：

React-admin 使用 react-final-form，它反过来使用 react Context 来存储当前表单值。

这意味着您无法从表单外部访问这些值（而我在表单之外）。

解决方案是将当前表单值存储在 SimpleForm 和 Aside 共享的状态中（甚至在 Redux 存储中）。为此，请在表单中使用FormSpy，它将在值更改时更新共享状态。

// in MyEdit.js
export const MyEdit = (props) => {
  const [formValues, setFormValues] = useState();
  return ( 
  <Edit aside={<Aside formValues={formValues} />} {...props}>
      <SimpleForm>
        <ArrayInput source="students">
                <SimpleFormIterator>
                  <TextInput source="name" /
                  <NumberInput source="role" />
                </SimpleFormIterator>
              </ArrayInput>
         <FormSpy
             subscription={{ valid: true }}
             onChange={props => {
                 setFormValues(props.values);
             }}
          />
      </SimpleForm>
  </Edit>
  );
};

【讨论】：

谢谢美人！