如何添加具有输出的用户输入并能够使用React Javascript/ Material UI显示

npm install @material-ui/core

import React, { useState } from 'react';
import { TextField, Button } from '@material-ui/core';

const InputComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleButtonClick = () => {
    console.log(inputValue); // 输出用户输入的值
  };

  return (
    <div>
      <TextField
        label="输入内容"
        value={inputValue}
        onChange={handleInputChange}
      />
      <Button variant="contained" color="primary" onClick={handleButtonClick}>
        提交
      </Button>
    </div>
  );
};

export default InputComponent;

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

const App = () => {
  return (
    <div>
      <h1>用户输入示例</h1>
      <InputComponent />
    </div>
  );
};

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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