React与Material-UI：如何实现点击后永久禁用指定Raised Button？

嘿，这个需求其实很好解决！核心思路就是给每个需要控制的按钮绑定独立的状态变量，点击时把对应状态切换为true，就能让按钮变成禁用状态了。下面分两种常用的组件写法给你具体示例：

函数组件（React Hooks） #

如果你的组件是用Hooks编写的，用useState来管理禁用状态非常直观：

import React, { useState } from 'react';
import RaisedButton from 'material-ui/RaisedButton';

function ButtonGroup() {
  // 初始化两个按钮的禁用状态，默认都是false（可用）
  const [isBtn1Disabled, setIsBtn1Disabled] = useState(false);
  const [isBtn2Disabled, setIsBtn2Disabled] = useState(false);

  const handleBtn1Click = () => {
    // 点击后把按钮1的禁用状态设为true
    setIsBtn1Disabled(true);
    // 这里可以添加你的业务逻辑，比如提交表单、发送API请求等
  };

  const handleBtn2Click = () => {
    setIsBtn2Disabled(true);
    // 其他业务逻辑
  };

  return (
    <div>
      <RaisedButton
        label="点击我禁用"
        disabled={isBtn1Disabled}
        onClick={handleBtn1Click}
      />
      <RaisedButton
        label="我是另一个按钮"
        disabled={isBtn2Disabled}
        onClick={handleBtn2Click}
        style={{ marginLeft: '10px' }}
      />
    </div>
  );
}

export default ButtonGroup;

类组件 #

如果你的项目还在用类组件，用this.state来管理状态也很简单：

import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';

class ButtonGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isBtn1Disabled: false,
      isBtn2Disabled: false
    };
  }

  handleBtn1Click = () => {
    this.setState({ isBtn1Disabled: true });
    // 这里写你的业务逻辑
  };

  handleBtn2Click = () => {
    this.setState({ isBtn2Disabled: true });
    // 这里写你的业务逻辑
  };

  render() {
    return (
      <div>
        <RaisedButton
          label="点击我禁用"
          disabled={this.state.isBtn1Disabled}
          onClick={this.handleBtn1Click}
        />
        <RaisedButton
          label="我是另一个按钮"
          disabled={this.state.isBtn2Disabled}
          onClick={this.handleBtn2Click}
          style={{ marginLeft: '10px' }}
        />
      </div>
    );
  }
}

export default ButtonGroup;

动态生成按钮的情况 #

如果你的按钮是从数组动态渲染出来的（比如多个列表项按钮），可以把禁用状态存在一个对象或数组里，通过按钮的唯一标识（比如ID）来对应更新：

import React, { useState } from 'react';
import RaisedButton from 'material-ui/RaisedButton';

function DynamicButtons() {
  // 用对象存储每个按钮的禁用状态，key是按钮ID
  const [disabledButtons, setDisabledButtons] = useState({});

  const handleButtonClick = (buttonId) => {
    // 更新对应按钮的禁用状态
    setDisabledButtons(prevState => ({
      ...prevState,
      [buttonId]: true
    }));
  };

  // 模拟动态按钮数据
  const buttons = [
    { id: 1, label: "按钮1" },
    { id: 2, label: "按钮2" },
    { id: 3, label: "按钮3" }
  ];

  return (
    <div>
      {buttons.map(btn => (
        <RaisedButton
          key={btn.id}
          label={btn.label}
          disabled={disabledButtons[btn.id] || false}
          onClick={() => handleButtonClick(btn.id)}
          style={{ margin: '0 5px' }}
        />
      ))}
    </div>
  );
}

export default DynamicButtons;

小提示 #

注意哦：Material-UI的RaisedButton在v1.x及之后的版本里已经被重命名为Button，需要通过variant="contained"来实现凸起样式。如果你用的是新版本，只需要把组件名改成Button并添加variant="contained"属性，状态管理的逻辑完全一样~

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