【Typescript学习】使用 React 和 TypeScript 构建web应用 部分UI、useState、useRef、Props

import React, { useState } from 'react';
import { Button, TextField } from '@fluentui/react';
 
interface IAppProps {
  // 如果有需要可以在这里定义属性类型
}
 
const App: React.FC<IAppProps> = () => {
  const [inputValue, setInputValue] = useState('');
 
  const handleInputChange = (event: React.FormEvent<HTMLInputElement>): void => {
    setInputValue(event.currentTarget.value);
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    alert('提交的输入值为: ' + inputValue);
    event.preventDefault();
  };
 
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <TextField
          label="输入一些文字"
          value={inputValue}
          onChange={handleInputChange}
        />
        <Button type="submit">提交</Button>
      </form>
    </div>
  );
};
 
export default App;

这段代码使用了Fluent UI组件库中的TextField和Button组件，并通过useState钩子管理表单输入的状态。用户输入的内容会实时更新，并且点击提交按钮后会弹出一个警告框显示输入的内容。这个例子展示了如何在React和TypeScript应用中处理表单输入和状态管理。