Forms in React

Build accessible controlled forms, submit real form data, and present validation clearly.

更新于 2026年8月13日适用于 React 19.2

React works with native forms rather than replacing them. Keep labels, input types, keyboard submission, and built-in constraints.

A controlled field

SearchForm.tsx

01function SearchForm() {
02  const [query, setQuery] = useState("");
03  return <form onSubmit={(event) => { event.preventDefault(); runSearch(query); }}>
04    <label htmlFor="query">Search lessons</label>
05    <input id="query" name="query" value={query} onChange={(event) => setQuery(event.target.value)} />
06    <button type="submit">Search</button>
07  </form>;
08}

Controlled inputs take their current value from state. Uncontrolled inputs with defaultValue and FormData can be simpler when live state is unnecessary.

Validation feedback

Use native constraints first, validate again in the submit action or server, and connect custom error text with aria-describedby and aria-invalid.

Keep this

Preserve native form behavior, choose controlled state only when useful, and make errors specific, connected, and recoverable.