Показать отредактированное значение в сторону в реагировать-администратор - PullRequest
Новая
       23

Показать отредактированное значение в сторону в реагировать-администратор

2 голосов
/ 17 января 2020

Я использую реагирующий администратор для интерфейса администратора. Помимо формы редактирования, я хочу показать отредактированное значение (просто чтобы понять, как получить измененные значения формы, позже будут показаны данные из 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?

1 Ответ

1 голос
/ 23 января 2020

React-admin использует реакцию-финальную форму, которая в свою очередь использует контекст реакции для хранения текущих значений формы.

, что означает, что вы не можете получить доступ к этим значениям извне формы (и я aside находится за пределами формы).

Решение состоит в том, чтобы сохранить текущие значения формы в состоянии, совместно используемом как 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>
  );
};
...