选择复选框内的组件，antd

Question

我正在使用 antd 处理 React 项目，并且我有一个复选框组件，当使用将复选框标记为已选中时，将显示一个选择选项。我将提供我的代码以使其清晰。

        <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>

如果selectedCheckbox为真，则选择组件将被显示，但是当用户尝试选择一个选项时的问题onSelect函数将不会被调用onClick将被调用，而假值e.target.checked等于假。

如果在选择中进行了任何更改，是否有任何方法可以在不影响onClick功能的情况下将 Select 组件放在复选框中？

任何建议都会有所帮助，谢谢。

Answer 1

正如mr-rogers在他的评论中正确描述的那样，推荐的设计是创建一个包含Checkbox和Select作为单独组件的父组件。 否则，如果用户尝试点击Select则始终调用Checkbox的onChange 。 这显然是错误的。

一个简单的例子可能是这样的（这里也是 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'));