如何在功能组件中更改上下文值？

import React, { useContext, useState } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  const { contextValue, setContextValue } = useContext(MyContext);
  const [newValue, setNewValue] = useState('');

  const handleChange = (event) => {
    setNewValue(event.target.value);
  };

  const handleClick = () => {
    setContextValue(newValue);
  };

  return (
    <div>
      <input type="text" value={newValue} onChange={handleChange} />
      <button onClick={handleClick}>Change Context Value</button>
    </div>
  );
};

export default MyComponent;

import React, { Component } from 'react';
import MyContext from './MyContext';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newValue: '',
    };
  }

  handleChange = (event) => {
    this.setState({ newValue: event.target.value });
  };

  handleClick = () => {
    this.context.setContextValue(this.state.newValue);
  };

  render() {
    return (
      <div>
        <input type="text" value={this.state.newValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>Change Context Value</button>
      </div>
    );
  }
}

MyComponent.contextType = MyContext;

export default MyComponent;