選擇復選框內的組件，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'));