javascript - seleccionar componente dentro de checkbox, antd

Estoy trabajando en un proyecto de React con antd y tengo un componente de casilla de verificación, cuando se marca la casilla se mostrarán opciones de selección. Proporcionaré mi código para ser claro.

        <Checkbox
      key={identifier}
      onClick={(e: any) => {
        setSelectedCheckbox(e.target.checked);
        console.log('test=1', e);
      }}
      name={label}
      disabled={viewAssignment}>
      {selectedCheckbox && (
        <Select
          disabled={viewAssignment}
          key={identifier2}
          onSelect={(e: any) => console.log('test=2', e)}
          defaultValue={inputValue}
          notFoundContent={
            <CustomizeRenderEmpty message={t('NOT_FOUND')} />
          }>
          <Select.Option key={'data'} name={'data'} value={'data'}>
            {'data'}
          </Select.Option>
          )
        </Select>
      )}
    </Checkbox>

si selectedCheckbox es verdadero, entonces se mostrará el componente select, pero el problema es que cuando el usuario intenta seleccionar una opción, la función onSelect no se llamará; en su lugar, se llamará onClick con el valor falso e.target.checked igual a falso.

¿Hay alguna manera de tener un componente Select dentro de un checkbox sin afectar la función onClick si se realiza algún cambio en el select?

Cualquier sugerencia será útil, gracias.

Respuesta #1

Como describió correctamente mr-rogers en su comentario, el diseño recomendado es crear un componente padre que contenga el Checkbox y el Select como componentes separados. De lo contrario, el onChange del Checkbox siempre se llama si un usuario intenta seleccionar el Select. Esto es obviamente incorrecto.

Un ejemplo simple podría verse así (aquí está también el Stackblitz):

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox, Select } from 'antd';

const CheckboxDemo = () => {
  const [selectedCheckbox, setSelectedCheckbox] = useState(false);
  return (
    <div>
      <Checkbox
        onChange={e => {
          setSelectedCheckbox(e.target.checked);
          console.log(e.target);
          console.log('test=1', e.target.checked);
        }}
        name="Test"
      >
        Test
      </Checkbox>
      {selectedCheckbox && (
        <Select
          key="2"
          style={{ width: 100 }}
          onChange={e => console.log('test=2', e)}
        >
          <Select.Option key="data1" name="data1" value="data1">
            data 1
          </Select.Option>
          <Select.Option key="data2" name="data2" value="data2">
            data 2
          </Select.Option>
        </Select>
      )}
    </div>
  );
};

ReactDOM.render(<CheckboxDemo />, document.getElementById('container'));