React应用程序，从初始get请求获取数据后，onChange不工作

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

  componentDidMount() {
    fetch('your-api-endpoint')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  handleChange = (event) => {
    console.log(event.target.value);
    // 处理onChange逻辑
  }

  render() {
    return (
      <div>
        {this.state.data && <input type="text" onChange={this.handleChange} />}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  // ...其他代码

  render() {
    return (
      <div>
        {this.state.data && <input type="text" onChange={this.handleChange} />}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  // ...其他代码

  render() {
    if (!this.state.data) return <div>Loading...</div>;
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
      </div>
    );
  }
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('your-api-endpoint')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  const handleChange = (event) => {
    console.log(event.target.value);
    // 处理onChange逻辑
  };

  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <input type="text" onChange={handleChange} />
    </div>
  );
}