如何条件禁用MUI自定义react-number-input的所有元素？

你遇到的问题是因为MUI Base的自定义NumberInput组件中，主输入框的disabled属性不会自动传递给手动渲染的增减按钮——毕竟自定义场景下按钮是你独立控制的元素，所以需要手动把禁用状态同步给所有组件。

具体解决步骤如下：

1. 维护禁用状态：在组件内定义一个控制禁用的状态（或接收父组件传入的disabled props），比如用useState管理：

   const [isDisabled, setIsDisabled] = useState(false);
   

2. 同步禁用状态到所有元素：把这个isDisabled值同时传给NumberInput和两个增减按钮：

   • 给NumberInput添加disabled={isDisabled}（这部分你已经做了）
   • 给每个增减按钮也添加disabled={isDisabled}属性，阻止按钮的点击事件

3. 优化禁用视觉效果：如果需要，给按钮添加禁用状态下的样式，比如灰化、改变光标样式，确保用户能直观感知到元素已禁用。

完整示例代码 #

import { useState } from 'react';
import { NumberInput } from '@mui/base/NumberInput';
import { Button } from '@mui/base/Button';
import { styled } from '@mui/system';

// 自定义带禁用样式的按钮
const StyledButton = styled(Button)`
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
  }
`;

export default function CustomDisabledNumberInput() {
  const [value, setValue] = useState(0);
  const [isDisabled, setIsDisabled] = useState(false);

  const handleIncrement = () => {
    setValue(prev => prev + 1);
  };

  const handleDecrement = () => {
    setValue(prev => prev - 1);
  };

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center', padding: '16px' }}>
      <StyledButton onClick={handleDecrement} disabled={isDisabled}>
        -
      </StyledButton>
      <NumberInput
        value={value}
        onChange={(event, newValue) => setValue(newValue)}
        disabled={isDisabled}
        style={{ width: '80px', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
      />
      <StyledButton onClick={handleIncrement} disabled={isDisabled}>
        +
      </StyledButton>
      {/* 测试用：切换禁用/启用状态 */}
      <StyledButton onClick={() => setIsDisabled(!isDisabled)}>
        {isDisabled ? '启用输入框' : '禁用输入框'}
      </StyledButton>
    </div>
  );
}

这样修改后，当isDisabled为true时，输入框会被禁用，两个增减按钮也会无法点击，同时视觉上呈现禁用状态。

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