Проблемы с компонентами response-admin

Question

Я пытаюсь использовать TabbedShowLayout внутри Редактировать , но это возвращает ошибку, связанную с отсутствующими реквизитами:

печать ошибки

Вот мой код:

export const BarberEdit = (props) => {
  const [id, setId] = useState(props.id);
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [birthday, setBirthday] = useState(Date);
  const [transport, setTransport] = useState("");
  const [email, setEmail] = useState("");

  function handleSubmit() {
    console.log("alguma coisa.");
  }

  return (
    <Edit {...props} title={<BarberEditTitle />}>
      <TabbedShowLayout>
        <Tab label="Perfil">
          <SimpleForm submitOnEnter={false}>
            <TextInput source="name" />
            <TextInput source="phone" />
            <DateInput source="birthday" />
            <TextInput source="transport" />
            <TextInput source="email" />
          </SimpleForm>
        </Tab>

        <Tab label="Endereço">
          <ReferenceManyField
            label=""
            reference="barbers_addresses"
            target="barberId"
          >
            <Datagrid>
              <TextField source="street" label="Rua" />
              <TextField source="city" label="Cidade" />
              <TextField source="district" label="Bairro" />
            </Datagrid>
          </ReferenceManyField>
        </Tab>
      </TabbedShowLayout>
    </Edit>
  );
};

Немного почитав документацию act-admin , я обнаружил, что SimpleForm имеет два унаследованных свойства.

заранее спасибо!

Answer 1

Для редактирования и создания макета вы должны использовать TabbedForm, а не TabbedShowLayout, также нет необходимости использовать SimpleForm в качестве дочернего элемента Tab, и вы можете передать submitOnEnter непосредственно в TabbedForm

export const BarberEdit = (props) => {
  const [id, setId] = useState(props.id);
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [birthday, setBirthday] = useState(Date);
  const [transport, setTransport] = useState("");
  const [email, setEmail] = useState("");

  function handleSubmit() {
    console.log("alguma coisa.");
  }

  return (
    <Edit {...props} title={<BarberEditTitle />}>
      <TabbedForm submitOnEnter={false}>
        <FormTab label="Perfil">
            <TextInput source="name" />
            <TextInput source="phone" />
            <DateInput source="birthday" />
            <TextInput source="transport" />
            <TextInput source="email" />
        </FormTab>

        <FormTab label="Endereço">
          <ReferenceManyField
            label=""
            reference="barbers_addresses"
            target="barberId"
          >
            <Datagrid>
              <TextField source="street" label="Rua" />
              <TextField source="city" label="Cidade" />
              <TextField source="district" label="Bairro" />
            </Datagrid>
          </ReferenceManyField>
        </FormTab>
      </TabbedForm>
    </Edit>
  );
};