Question

我想为react-admin编写一个自定义组件。它的行为与CheckboxGroupInput完全相同；唯一的不同是，我想根据表中的特定方式来组织复选框。

当前，我以这种方式使用CheckboxGroupInput：

<CheckboxGroupInput
    source="data"
    choices={[
      { id: 'id1', name: 'id1' },
      { id: 'id2', name: 'id2' },
      { id: 'id3', name: 'id3' },
    ]}
  />

复选框显示在单行中，我对此无能为力。

我想要以下内容：

<PromotionPicker
    source="data"
  />

不同的选择将隐藏在CustomInput中（因为它们不变），并以特定方式显示在表格中。

问题是，我不知道该怎么实现。

由于行为相同，我应该创建一个组件并将其与现有的CheckboxGroupInput一起使用吗？是否找到仅重写render()方法的方法？
我应该编写一个全新的组件吗？如果是，您是否有一些资源或想法？我读过the doc有关自定义输入的信息。在这种情况下适用吗？它似乎与<Field>组件有关。

这是我尝试过的：

const renderPromotionPicker = ({ input, meta: { touched, error } }) => (
<Table>
    <TableHead>
      <TableRow>
        <TableCell>Col 1</TableCell>
        <TableCell>Col 2</TableCell>
        <TableCell>Col 3</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>
          <Checkbox id={'id1'} value={'val1'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id2'} value={'val2'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id3'} value={'val3'} />
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>
          <Checkbox id={'id4'} value={'val4'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id5'} value={'val5'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id6'} value={'val6'} />
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

const PromotionPicker = ({ source }) => <Field name={source} component={renderPromotionPicker} />
export default PromotionPicker;

此代码的问题是我没有收到source={data}给出的数据，因此复选框无法反映预期的数据。

感谢您的建议！

在CheckboxGroupInput模型上编写自定义组件

0 个答案: