Написание пользовательского компонента по модели CheckboxGroupInput - PullRequest
Новая
       5

Написание пользовательского компонента по модели CheckboxGroupInput

0 голосов
/ 08 октября 2018

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

Спасибо за ваши предложения!

...