javascript - 在复选框内选择组件，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 为 true 那么选择组件将被显示，但是当用户尝试选择一个选项时的问题 onSelect 函数将不会被调用 onClick 将被调用，而不是使用 false 值 e.target.checked 等于 false。

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

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

Answer 1

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

一个简单的示例可能如下所示(here 也是 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'));