如何通过向输入标记分配状态来禁用React中的输入标记

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisabled: false
    };
  }

  render() {
    const { isDisabled } = this.state;
    return (
      <div>
        <input type="text" disabled={isDisabled} />
        <button onClick={() => this.setState({ isDisabled: true })}>
          禁用输入标记
        </button>
      </div>
    );
  }
}

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

import React, { useState } from 'react';

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

  return (
    <div>
      <input type="text" disabled={isDisabled} />
      <button onClick={() => setIsDisabled(true)}>
        禁用输入标记
      </button>
    </div>
  );
}

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