react-admin 组件的问题

Question

I'm trying to use a TabbedShowLayout inside of Edit but this return a error related the missing props:

print of the error

Here is my code:

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>
  );
};

Reading the react-admin documentation a bit, i found that SimpleForm has two inherited properties.

thanks in advance!

Answer 1

For Edit and Create layout, you should use TabbedForm, and not TabbedShowLayout, also, there is no need to use SimpleForm as Tab child, and you can pass submitOnEnter directly to 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>
  );
};