如何在React中用按钮的innerText填充输入，同时也从键盘输入？

import React, { useState } from 'react';

const InputButton = () => {
  const [text, setText] = useState(''); // 用于保存输入框的值

  const handleButtonClick = () => {
    // 获取按钮的innerText，并设置为输入框的值
    const buttonText = document.getElementById('button').innerText;
    setText(buttonText);
  };

  const handleInputChange = (e) => {
    // 监听输入框的值变化，并更新state
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleInputChange} />
      <button id="button" onClick={handleButtonClick}>
        按钮
      </button>
    </div>
  );
};

export default InputButton;

import React from 'react';
import InputButton from './InputButton';

const App = () => {
  return (
    <div>
      <InputButton />
    </div>
  );
};

export default App;