Блог

 const SimpleChoiceItem = (props: Props) => {
  const { content, isSelected, onChange, onMove, onDelete, is_default } = props;
  const [isEdit, setIsEdit] = React.useState<boolean>(false);

  React.useEffect(() => {
    if (!isSelected) {
      setIsEdit(false)
    }
  }, [isSelected])

  return <div style={{ margin: '17px 0' }}>
    {
      isEdit ? <div style={{ display: 'flex', justifyContent: 'space-between', }} onBlur={() => {
        console.log('====onBlur===')
        setIsEdit(false)
      }}>
        <div style={{ flex: 1 }}>
          <Input value={content} onChange={e => onChange(e.target.value)} />
        </div>
        <div>
          <Checkbox value={is_default} onChange={e => {
            // When I click this element, I want to console the below words, But console the onBlur
            console.log('===Check box === onChange==')
          }}>默认</Checkbox>
          <ArrowUpOutlined style={{ marginLeft: '20px', cursor: 'pointer' }} onMouseDown={() => onMove('up')} />
          <ArrowDownOutlined style={{ marginLeft: '20px', cursor: 'pointer' }} onMouseDown={() => onMove('down')} />
          <CloseOutlined style={{ marginLeft: '20px', cursor: 'pointer' }} onMouseDown={() => onDelete()} />
        </div>
      </div> : <div onClick={() => setIsEdit(true)}>{content}</div>
    }
  </div>
}
 

<CheckBox /> является ли Antd компонентом https://ant.design/components/checkbox-cn /

Я хочу установить этот флажок, но консоль onBlur и IsEdit = false

Попробуйте предотвратить распространение по умолчанию и остановить распространение по флажку, чтобы событие не запускало другие элементы:

  <Checkbox value={is_default} onChange={e => {
    e.preventDefault();
    e.stopPropagation();
    console.log('===Check box === onChange==')
 }}>默认</Checkbox>