如何通过onClick事件将从另一个组件获取的值传递给组件

// 获取值的组件
import React, { useState } from 'react';

const GetValueComponent = ({ onClick }) => {
  const [value, setValue] = useState('');

  const handleClick = () => {
    // 获取值的逻辑，这里假设从输入框中获取值
    const inputValue = document.getElementById('input').value;
    setValue(inputValue);
    onClick(inputValue); // 将获取的值传递给父组件
  };

  return (
    <div>
      <input id="input" type="text" />
      <button onClick={handleClick}>获取值并传递</button>
    </div>
  );
};

export default GetValueComponent;

// 接收值的组件
import React, { useState, useEffect } from 'react';

const ReceiveValueComponent = ({ value }) => {
  const [receivedValue, setReceivedValue] = useState('');

  useEffect(() => {
    setReceivedValue(value); // 监听传递过来的值的变化，并更新接收值的状态
  }, [value]);

  return (
    <div>
      <p>接收到的值：{receivedValue}</p>
    </div>
  );
};

export default ReceiveValueComponent;

// 父组件
import React, { useState } from 'react';
import GetValueComponent from './GetValueComponent';
import ReceiveValueComponent from './ReceiveValueComponent';

const ParentComponent = () => {
  const [value, setValue] = useState('');

  const handleValueChange = (newValue) => {
    setValue(newValue); // 接收从子组件传递过来的值
  };

  return (
    <div>
      <GetValueComponent onClick={handleValueChange} />
      <ReceiveValueComponent value={value} />
    </div>
  );
};

export default ParentComponent;