react From表单

React中的表单通常使用`<form>`和`<input>`等HTML元素来创建。下面是一个简单的例子：

import React, { useState } from 'react';

function FormExample() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = event => {
    event.preventDefault();
    console.log('Submitted:', username, password);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
      </label>
      <br />
      <label>
        Password:
        <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

这里定义了两个state变量`username`和`password`，并且通过`useState` hook进行初始化。在表单中，我们定义了两个输入框，分别对应于这两个state变量。当用户输入时，通过`onChange`回调函数更新对应的state变量。在表单提交时，调用`handleSubmit`函数进行处理。在这个例子中，我们只是简单地将用户名和密码输出到控制台上。