记录一下react捕获事件的使用

场景：

• 业务上有个需求，一个select框（s2）的数据依赖另一个select框（s1）选择的值，在该场景下是必须先选择s1，如果用户先点击了s2则给提示，目前遇到的问题是点击s2的时候会触发select的点击事件弹出下拉框，这明显是不符合需求的。如下图所示：

需要解决的问题：

• 点击s2 弹出提示，请先选择s1，不触发select的点击事件 解决方法：
• 使用捕获事件并阻止里层的点击事件被触发，React中使用onClickCapture会在捕获阶段调用事件回调执行

案例：

clickS2Handle = (e) => {
    if (!this.props.form.getFieldValue('s1')) {
      e.preventDefault(); // 阻止默认行为
      e.stopPropagation(); // 阻止事件冒泡
      message.info('请先选择s1!');
      return;
    }
}
  
<Col className="gutter-row" span={12} onClickCapture={this.clickS2Handle}>
    <Form.Item label="s2" hasFeedback>
      {getFieldDecorator("field", {
        initialValue: detail.field || undefined,
        rules: [
          {
            required: true,
            message: "请选择",
          },
        ],
      })(
        <Select
          allowClear
          placeholder="请选择"
          showSearch
          optionFilterProp="children"
        >
          {(data || []).map((item, index) => {
            return (
              <Option
                key={index + ""}
                value={item.id + ""}
              >
                {item.name}
              </Option>
            );
          })}
        </Select>
      )}
    </Form.Item>
</Col>

页面效果如下所示：

另外在另一篇文章里补充下DOM事件流相关知识 点击 →_→ [DOM事件流](DOM事件流and事件对象 - 掘金 (juejin.cn))