react-admin 组件的问题答案

【问题标题】：Problems with react-admin componentsreact-admin 组件的问题
【发布时间】：2020-08-16 12:57:22
【问题描述】：

我正在尝试在 Edit 中使用 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>
  );
};

稍微阅读react-admin文档，我发现SimpleForm有两个继承属性。

提前致谢！

【问题讨论】：

如果您删除 TabbedShowLayout 的所有子代并一次又添加一个（例如，添加一个、删除它、添加另一个、删除它、重复）会发生什么？
请发布文本，而不是文本图像的链接。
@McKayM 我相信我们会得到相同的结果，因为错误在于是否继承属性。然后在某个时候他会再次出现
@DaveNewton 我的帐户是最近的，因此我仍然无权发布图片，只需链接以引用它们:(
... 您可以发布文本。是文字的图片。发布文字，而不是图片。

标签： reactjs react-admin

【解决方案1】：

对于编辑和创建布局，您应该使用 TabbedForm，而不是 TabbedShowLayout，另外，不需要使用 SimpleForm 作为 Tab child，您可以将 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>
  );
};

【讨论】：

哇！感谢您的贡献！我只是做了一些调整，因为 TabbedForm 不是和 Tab 一起工作的，而是 FormTab。一切都恢复正常了:)
你是对的。我用 FormTab 编辑了答案。很高兴一切正常。