React Material UI 1.0.0-beta.34 Select组件onChange传参问题求助

我来帮你搞定这个问题！在Material UI 1.0 beta版本的Select组件中，onChange回调确实默认只传递event对象，但咱们有几种简单的方式来传递额外参数，下面给你逐一说明：

方法1：用箭头函数包裹回调函数 #

这是最直观的方式，直接在onChange属性里用箭头函数把event和额外参数一起传给处理函数：

容器组件示例 #

class YourContainer extends React.Component {
  handleSelectChange = (event, extraParam) => {
    // 在这里可以同时拿到event和extraParam
    console.log('选中值:', event.target.value);
    console.log('额外参数:', extraParam);
  };

  render() {
    const extraParam = '我是额外参数';
    return (
      <CustomSelect
        onChange={(event) => this.handleSelectChange(event, extraParam)}
        // 其他属性...
      />
    );
  }
}

自定义Select组件示例 #

const CustomSelect = ({ onChange, ...props }) => {
  return (
    <Select
      onChange={onChange}
      // 其他Material UI Select属性...
    >
      <MenuItem value="option1">选项1</MenuItem>
      <MenuItem value="option2">选项2</MenuItem>
    </Select>
  );
};

方法2：使用bind()绑定额外参数 #

你也可以用bind()把额外参数绑定到处理函数上，不过要注意参数顺序——bind绑定的参数会排在event前面：

class YourContainer extends React.Component {
  handleSelectChange = (extraParam, event) => {
    // 注意这里参数顺序变了，先接收额外参数，再接收event
    console.log('选中值:', event.target.value);
    console.log('额外参数:', extraParam);
  };

  render() {
    const extraParam = '我是额外参数';
    return (
      <CustomSelect
        onChange={this.handleSelectChange.bind(this, extraParam)}
        // 其他属性...
      />
    );
  }
}

如果是类组件，你也可以把bind操作放在constructor里，避免每次render都创建新函数：

constructor(props) {
  super(props);
  this.extraParam = '我是额外参数';
  this.boundHandleChange = this.handleSelectChange.bind(this, this.extraParam);
}

// 然后render里用
onChange={this.boundHandleChange}

方法3：利用DOM的data-*属性 #

如果你的额外参数和具体的选项相关，还可以把参数存在MenuItem的data属性里，然后在处理函数中通过event对象获取：

自定义Select组件修改 #

const CustomSelect = ({ onChange, ...props }) => {
  return (
    <Select
      onChange={onChange}
      // 其他属性...
    >
      <MenuItem value="option1" data-category="分类A">选项1</MenuItem>
      <MenuItem value="option2" data-category="分类B">选项2</MenuItem>
    </Select>
  );
};

处理函数获取参数 #

handleSelectChange = (event) => {
  const selectedValue = event.target.value;
  const extraParam = event.target.dataset.category; // 从data属性获取
  console.log('选中值:', selectedValue);
  console.log('分类:', extraParam);
};

小提示 #

如果你的组件是函数式组件，且担心箭头函数导致的不必要重渲染，可以用useCallback来缓存处理函数：

const YourContainer = () => {
  const extraParam = '我是额外参数';
  const handleSelectChange = useCallback((event) => {
    console.log(event.target.value, extraParam);
  }, [extraParam]); // 依赖项数组，当extraParam变化时才重新创建函数

  return <CustomSelect onChange={handleSelectChange} />;
};

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