React Checkbox&Select onChange事件无法触发问题求助

我之前在项目里结合React和Materialize CSS时，也碰到过一模一样的事件绑定失效问题，折腾了好一阵子才搞明白根源！下面给你分析可能的原因和对应的解决办法：

核心原因：Materialize重写了DOM结构 #

Materialize CSS为了实现它的UI样式，会把原生的<input>、<checkbox>等元素包装成自定义的DOM结构，甚至会隐藏原生元素。这就导致React绑定的onChange、onClick事件其实是挂在了被Materialize替换/隐藏的元素上，自然没法触发。

解决方案1：用React版Materialize封装库 #

最省心的办法是直接使用官方维护的React封装库，它已经帮我们处理了Materialize和React虚拟DOM的同步问题，事件绑定和状态管理能像普通React组件一样正常工作：

import React, { useState } from 'react';
import { Input, Checkbox } from 'react-materialize';

function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div className="container">
      <Input
        label="用户名"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <Checkbox
        label="同意协议"
        checked={isChecked}
        onChange={() => setIsChecked(!isChecked)}
      />
    </div>
  );
}

解决方案2：手动用Ref绑定原生事件 #

如果不想额外引入库，那可以通过React的ref获取原生DOM元素，直接绑定原生事件（绕过Materialize的DOM拦截）：

函数组件版本 #

import React, { useState, useRef, useEffect } from 'react';

function CustomInput() {
  const [value, setValue] = useState('');
  const [checkboxChecked, setCheckboxChecked] = useState(false);
  const inputRef = useRef(null);
  const checkboxRef = useRef(null);

  useEffect(() => {
    // 绑定输入框的input事件
    const handleInput = (e) => {
      setValue(e.target.value);
    };
    // 绑定复选框的change事件
    const handleCheckboxChange = (e) => {
      setCheckboxChecked(e.target.checked);
    };

    // 给真实DOM元素绑定事件
    if (inputRef.current) {
      inputRef.current.addEventListener('input', handleInput);
    }
    if (checkboxRef.current) {
      checkboxRef.current.addEventListener('change', handleCheckboxChange);
    }

    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      if (inputRef.current) {
        inputRef.current.removeEventListener('input', handleInput);
      }
      if (checkboxRef.current) {
        checkboxRef.current.removeEventListener('change', handleCheckboxChange);
      }
    };
  }, []);

  return (
    <div className="input-field">
      <input
        ref={inputRef}
        id="custom-input"
        type="text"
        value={value}
      />
      <label htmlFor="custom-input">自定义输入框</label>

      <p>
        <label>
          <input
            ref={checkboxRef}
            type="checkbox"
            checked={checkboxChecked}
          />
          <span>同意条款</span>
        </label>
      </p>
    </div>
  );
}

类组件版本 #

import React from 'react';

class CustomInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.checkboxRef = React.createRef();
    this.state = {
      value: '',
      checkboxChecked: false
    };
  }

  componentDidMount() {
    this.inputRef.current.addEventListener('input', this.handleInput);
    this.checkboxRef.current.addEventListener('change', this.handleCheckboxChange);
  }

  componentWillUnmount() {
    this.inputRef.current.removeEventListener('input', this.handleInput);
    this.checkboxRef.current.removeEventListener('change', this.handleCheckboxChange);
  }

  handleInput = (e) => {
    this.setState({ value: e.target.value });
  };

  handleCheckboxChange = (e) => {
    this.setState({ checkboxChecked: e.target.checked });
  };

  render() {
    return (
      <div className="input-field">
        <input
          ref={this.inputRef}
          id="class-input"
          type="text"
          value={this.state.value}
        />
        <label htmlFor="class-input">类组件输入框</label>

        <p>
          <label>
            <input
              ref={this.checkboxRef}
              type="checkbox"
              checked={this.state.checkboxChecked}
            />
            <span>同意条款</span>
          </label>
        </p>
      </div>
    );
  }
}

关键注意事项 #

• 不要在React组件里直接调用Materialize的初始化方法（比如M.Input.init()），这会导致React的虚拟DOM和Materialize修改后的真实DOM不一致，引发各种奇怪的问题。
• 如果你用了Materialize的表单组件，一定要确保事件绑定在原生DOM元素上，而不是Materialize生成的外层容器或装饰元素。

内容的提问来源于stack exchange，提问作者user5210565