使用refs不是最佳实践，因为它直接读取DOM，最好使用React的state。此外，按钮不会改变，因为组件不会重新呈现，并保持其初始状态。
您可以将setState与onChange事件侦听器一起使用，以便在每次输入字段更改时再次呈现组件：

// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />

// Button is disabled when input state is empty.
<button disabled={!this.state.value} />

下面是一个工作示例：
x一个一个一个一个x一个一个二个x

在HTML中，

<button disabled/>
<button disabled="true">
<button disabled="false">
<button disabled="21">

所有这些都归结为disabled="true"，这是因为它返回非空字符串true，因此，为了返回false，在条件语句中传递一个空字符串，如this.input.value ? "true" : ""。

render() {
    return (
        <div className="add-item">
            <input
                type="text"
                className="add-item__input"
                ref={(input) => this.input = input}
                placeholder={this.props.placeholder}
            />
            <button 
                disabled={this.input.value ? "true" : ""}
                className="add-item__button"
                onClick={this.add.bind(this)}
            >
                Add
            </button>
        </div>
    );
}

下面是一个使用react钩子的函数组件变体。
我提供的示例代码应该足够通用，可以针对特定用例进行修改，或者适合搜索“How to disable a button in React”的用户。

import React, { useState } from "react";

const YourComponent = () => {
  const [isDisabled, setDisabled] = useState(false);
  
  const handleSubmit = () => {
    console.log('Your button was clicked and is now disabled');
    setDisabled(true);
  }

  return (
      <button type="button" onClick={handleSubmit} disabled={isDisabled}>
        Submit
      </button>
  );
}

export default YourComponent;

在React.

中控制组件渲染的典型方法有几种
但是，我在这里没有使用任何一个，我只是使用ref来命名组件的底层子组件。

class AddItem extends React.Component {
    change(e) {
      if ("" != e.target.value) {
        this.button.disabled = false;
      } else {
        this.button.disabled = true;
      }
    }

    add(e) {
      console.log(this.input.value);
      this.input.value = '';
      this.button.disabled = true;
    }

    render() {
        return (
          <div className="add-item">
          <input type="text" className = "add-item__input" ref = {(input) => this.input=input} onChange = {this.change.bind(this)} />
          
          <button className="add-item__button" 
          onClick= {this.add.bind(this)} 
          ref={(button) => this.button=button}>Add
          </button>
          </div>
        );
    }
}

ReactDOM.render(<AddItem / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

你不应该通过引用来设置输入的值。
Take a look at the documentation for controlled form components here - https://facebook.github.io/react/docs/forms.html#controlled-components
简而言之

<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />

然后，您将能够使用disabled={!this.state.value}控制禁用状态

一个非常简单的解决方案是使用useRef钩子

const buttonRef = useRef();

const disableButton = () =>{
  buttonRef.current.disabled = true; // this disables the button
 }

<button
className="btn btn-primary mt-2"
ref={buttonRef}
onClick={disableButton}
>
    Add
</button>

同样，您可以使用buttonRef.current.disabled = false启用该按钮

在调用ref回调之前，this.input未定义。请尝试在构造函数中将this.input设置为某个初始值。
来自the React docs on refs，强调我的：
回调将在装入或卸载组件后立即执行

我也遇到过类似的问题，结果我们不需要钩子来做这些，我们可以做一个有条件的渲染，它仍然会工作得很好。

<Button
    type="submit"
    disabled={
        name === "" || email === "" || password === "" 
    }
    fullWidth
    variant="contained"
    color="primary"
    className={classes.submit}>
    SignUP
</Button>