\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260810155647-6a79f4bfaab53.png\")
<\/p>\n\u4e3a\u4ec0\u4e48 value \u5199\u4e86\u5374\u4e0d\u751f\u6548？\u4e3a\u4ec0\u4e48 onChange \u4e0d\u5199\u5c31\u53d8\u6210\u53ea\u8bfb\u8f93\u5165\u6846？\u4e3a\u4ec0\u4e48\u8868\u5355\u6821\u9a8c\u8981\u5199\u4e00\u5806\u4ee3\u7801？\u8fd9\u4e09\u4e2a\u95ee\u9898，\u662f\u65e0\u6570\u524d\u7aef\u9762\u8bd5\u5b98\u7684\u300c\u9001\u547d\u9898\u300d\u3002<\/p>\n
\u5982\u679c\u4f60\u6b63\u5728\u505a\u8868\u5355\u3001\u5199\u8f93\u5165\u6846，\u6216\u8005\u51c6\u5907\u9762\u8bd5，\u8fd9\u7bc7\u5c31\u662f\u4e3a\u4f60\u5199\u7684\u3002
\n<\/p>\n
\u770b\u5b8c\u4f60\u80fd\u89e3\u51b3 3 \u4e2a\u95ee\u9898：<\/p>\n
\u5168\u7a0b\u77ed\u53e5\u3001\u77ed\u6bb5\u843d，\u4ee3\u7801\u5b8c\u6574\u53ef\u590d\u5236，\u5efa\u8bae\u5148\u6536\u85cf\u518d\u6162\u6162\u770b\u3002<\/p>\n
\u521a\u5b66 React \u7684\u65f6\u5019，\u5f88\u591a\u4eba\u5199\u8f93\u5165\u6846\u662f\u8fd9\u4e48\u5e72\u7684：<\/p>\n
\/\/ \u9519\u8bef\u793a\u8303：value \u5199\u6b7b\u4e86，\u8f93\u5165\u6846\u6c38\u8fdc\u6539\u4e0d\u4e86
\nconst BadInput = () => {
\n const [value, setValue] = useState("")
\n return <input type="text" value={value} \/>
\n}<\/p>\n
\u7ed3\u679c\u8fd0\u884c\u4e00\u770b：\u8f93\u5165\u6846\u70b9\u90fd\u70b9\u4e0d\u52a8，\u952e\u76d8\u6572\u534a\u5929，\u4e00\u4e2a\u5b57\u90fd\u8f93\u4e0d\u8fdb\u53bb\u3002<\/p>\n
\u4f60\u4ee5\u4e3a\u662f\u6d4f\u89c8\u5668\u574f\u4e86，\u67e5\u534a\u5929\u624d\u53d1\u73b0\u2014\u2014\u4f60\u6ca1\u5199 onChange\u3002<\/p>\n
\u8fd9\u5c31\u662f\u53d7\u63a7\u7ec4\u4ef6\u7684\u6838\u5fc3\u903b\u8f91：\u6570\u636e\u5728\u54ea，\u5c55\u793a\u5c31\u5728\u54ea；\u60f3\u6539\u6570\u636e，\u5fc5\u987b\u8d70 setState\u3002<\/p>\n
\u53d7\u63a7\u7ec4\u4ef6，\u5c31\u662f \u7ec4\u4ef6\u7684\u663e\u793a\u503c\u5b8c\u5168\u7531 React \u72b6\u6001\u63a7\u5236\u3002<\/p>\n
\u7528\u4e00\u4e2a useState \u5b58\u503c，\u518d\u7528 onChange \u66f4\u65b0\u503c，\u5f62\u6210\u4e00\u4e2a\u95ed\u73af\u3002<\/p>\n
import { useState } from "react";<\/p>\n
\/\/ \u53d7\u63a7\u7ec4\u4ef6：\u503c\u7531 state \u63a7\u5236，\u6539\u503c\u5fc5\u987b\u8d70 setState
\nconst ControlledInput = () => {
\n const [value, setValue] = useState("");<\/p>\n
return (
\n <div>
\n <input
\n type="text"
\n value={value}
\n onChange={(e) => setValue(e.target.value)}
\n \/>
\n <\/div>
\n );
\n};<\/p>\n
export default ControlledInput;<\/p>\n
\u6838\u5fc3\u53ea\u6709 3 \u4e2a\u70b9：<\/p>\n
\u8fd9\u5c31\u662f React \u7684\u5355\u5411\u6570\u636e\u6d41：\u6570\u636e\u6d41\u5411 UI，UI \u4e8b\u4ef6\u518d\u6539\u6570\u636e，UI \u6c38\u8fdc\u4e0d\u80fd\u81ea\u5df1\u6539\u81ea\u5df1\u3002<\/p>\n
\u975e\u53d7\u63a7\u7ec4\u4ef6，\u5c31\u662f \u503c\u5b58\u5728 DOM \u81ea\u5df1\u8eab\u4e0a，React \u4e0d\u53bb\u7ba1\u5b83\u3002<\/p>\n
\u4f60\u60f3\u53d6\u503c？\u7528 useRef \u62ff\u5230 DOM \u8282\u70b9，\u76f4\u63a5\u8bfb .value\u3002<\/p>\n
import { useRef } from "react";<\/p>\n
\/\/ \u975e\u53d7\u63a7\u7ec4\u4ef6：\u503c\u5b58\u5728 DOM \u91cc，\u9700\u8981\u65f6\u7528 ref \u53d6
\nconst UncontrolledInput = () => {
\n const inputRef = useRef(null);<\/p>\n
const handleClick = () => {
\n console.log(inputRef.current.value); \/\/ \u70b9\u6309\u94ae\u65f6\u624d\u53d6\u503c
\n };<\/p>\n
return (
\n <div>
\n <input type="text" ref={inputRef} \/>
\n <button onClick={handleClick}>\u70b9\u51fb\u83b7\u53d6\u503c<\/button>
\n <\/div>
\n );
\n};<\/p>\n
export default UncontrolledInput;<\/p>\n
\u6ce8\u610f\u770b\u533a\u522b：<\/p>\n
\u4e00\u53e5\u8bdd\u8bb0\u4f4f：\u53d7\u63a7\u7ec4\u4ef6\u662f\u300cReact \u7ba1\u6570\u636e\u300d，\u975e\u53d7\u63a7\u7ec4\u4ef6\u662f\u300cDOM \u81ea\u5df1\u7ba1\u6570\u636e，React \u8981\u7528\u65f6\u518d\u53d6\u300d\u3002<\/p>\n
\u5f00\u53d1\u535a\u5ba2\u8bc4\u8bba\u533a，\u7528\u6237\u8f93\u5165\u5b8c\u70b9\u63d0\u4ea4，\u4f60\u53ea\u9700\u8981\u62ff\u5230\u8fd9\u6bb5\u6587\u5b57\u53bb\u8c03\u63a5\u53e3\u3002<\/p>\n
\u8fd9\u79cd\u300c\u53ea\u5728\u63d0\u4ea4\u90a3\u4e00\u523b\u53d6\u503c\u300d\u7684\u573a\u666f，\u975e\u53d7\u63a7\u7ec4\u4ef6\u7b80\u76f4\u4e0d\u8981\u592a\u723d\u2014\u2014\u4e0d\u7528\u6bcf\u6b21\u8f93\u5165\u90fd\u89e6\u53d1 re-render\u3002<\/p>\n
import { useRef } from "react";<\/p>\n
\/\/ \u975e\u53d7\u63a7：textarea \u7684\u503c\u4e0d\u7ecf\u8fc7 React，\u63d0\u4ea4\u65f6\u624d\u8bfb\u53d6
\nconst CommentBox = () => {
\n const textareaRef = useRef(null);<\/p>\n
const handleSubmit = () => {
\n const comment = textareaRef.current.value;
\n if (!comment) return;
\n console.log(comment); \/\/ \u8fd9\u91cc\u4e00\u822c\u662f\u8c03\u63a5\u53e3\u4e0a\u4f20
\n };<\/p>\n
return (
\n <div>
\n <textarea placeholder="\u8f93\u5165\u8bc4\u8bba" ref={textareaRef} \/>
\n <button onClick={handleSubmit}>\u63d0\u4ea4\u8bc4\u8bba<\/button>
\n <\/div>
\n );
\n};<\/p>\n
export default CommentBox;<\/p>\n
\u8fd9\u4e2a\u573a\u666f\u4e3a\u4ec0\u4e48\u9009\u975e\u53d7\u63a7？<\/p>\n
\u8e29\u5751\u63d0\u9192：ref.current \u53ea\u6709\u5728\u7ec4\u4ef6\u6302\u8f7d\u540e\u624d\u6709\u503c\u3002\u5728\u6e32\u67d3\u9636\u6bb5\u76f4\u63a5\u8bfb ref.current，\u62ff\u5230\u7684\u6c38\u8fdc\u662f null\u3002\u53d6\u503c\u5fc5\u987b\u653e\u5728\u4e8b\u4ef6\u56de\u8c03\u6216 useEffect \u91cc\u3002<\/p>\n
\u63a5\u4e0b\u6765\u662f\u9762\u8bd5\u5b98\u6700\u7231\u8003\u7684：\u5b9e\u65f6\u8868\u5355\u6821\u9a8c\u3002<\/p>\n
\u9700\u6c42\u662f\u8fd9\u6837\u7684：<\/p>\n
\u8fd9\u79cd\u300c\u8f93\u5165\u4e00\u4e2a\u5b57\u7b26，\u5c31\u8981\u7acb\u523b\u6821\u9a8c\u3001\u7acb\u523b\u63d0\u793a\u300d\u7684\u573a\u666f，\u5fc5\u987b\u7528\u53d7\u63a7\u7ec4\u4ef6\u3002\u56e0\u4e3a\u53ea\u6709\u6570\u636e\u7ecf\u8fc7 React，\u4f60\u624d\u80fd\u6bcf\u6572\u4e00\u4e2a\u5b57\u7b26\u5c31\u6821\u9a8c\u4e00\u6b21\u3002<\/p>\n
import { useState } from "react";<\/p>\n
const LoginForm = () => {
\n const [form, setForm] = useState({ username: "", password: "" });
\n const [error, setError] = useState({});<\/p>\n
\/\/ \u6821\u9a8c\u89c4\u5219：\u8fd4\u56de\u9519\u8bef\u4fe1\u606f，\u7a7a\u5b57\u7b26\u4e32\u8868\u793a\u901a\u8fc7
\n const validate = (name, value) => {
\n let msg = "";
\n if (name === "username") {
\n if (!value) {
\n msg = "\u7528\u6237\u540d\u4e3a\u7a7a";
\n } else if (value.length < 3) {
\n msg = "\u7528\u6237\u540d\u957f\u5ea6\u4e0d\u80fd\u5c0f\u4e8e3";
\n }
\n }
\n if (name === "password") {
\n if (!value) {
\n msg = "\u5bc6\u7801\u4e3a\u7a7a";
\n } else if (value.length < 3) {
\n msg = "\u5bc6\u7801\u957f\u5ea6\u4e0d\u80fd\u5c0f\u4e8e3";
\n }
\n }
\n setError((prev) => ({
\n …prev,
\n [name]: msg,
\n }));
\n };<\/p>\n
const handleChange = (e) => {
\n const { name, value } = e.target;
\n setForm({
\n …form,
\n [name]: value,
\n });
\n validate(name, value);
\n };<\/p>\n
\/\/ \u8868\u5355\u5408\u6cd5：\u7528\u6237\u540d\u5bc6\u7801\u90fd\u6709\u503c，\u4e14\u90fd\u6ca1\u6709\u9519\u8bef
\n const isValid = form.username && form.password && !error.username && !error.password;<\/p>\n
const handleSubmit = (e) => {
\n e.preventDefault();
\n if (!isValid) return;
\n console.log(form); \/\/ \u8fd9\u91cc\u4e00\u822c\u662f\u8c03\u767b\u5f55\u63a5\u53e3
\n };<\/p>\n
return (
\n <form>
\n <h2>\u767b\u5f55<\/h2>
\n <div>
\n <label>\u7528\u6237\u540d<\/label>
\n <input
\n type="text"
\n name="username"
\n value={form.username}
\n placeholder="\u8bf7\u8f93\u5165\u7528\u6237\u540d"
\n onChange={handleChange}
\n \/>
\n {error.username && <span className="error">{error.username}<\/span>}
\n <\/div>
\n <div>
\n <label>\u5bc6\u7801<\/label>
\n <input
\n type="text"
\n name="password"
\n value={form.password}
\n placeholder="\u8bf7\u8f93\u5165\u5bc6\u7801"
\n onChange={handleChange}
\n \/>
\n {error.password && <span className="error">{error.password}<\/span>}
\n <\/div>
\n <button type="submit" onClick={handleSubmit} disabled={!isValid}>
\n \u63d0\u4ea4
\n <\/button>
\n <\/form>
\n );
\n};<\/p>\n
export default LoginForm;<\/p>\n
\u8fd9\u6bb5\u4ee3\u7801\u503c\u5f97\u53cd\u590d\u770b\u7684 3 \u4e2a\u7ec6\u8282：<\/p>\n
\u8e29\u5751\u63d0\u9192：\u522b\u5fd8\u4e86 e.preventDefault()\u3002 \u4e0d\u5199\u7684\u8bdd，\u70b9\u63d0\u4ea4\u9875\u9762\u4f1a\u5237\u65b0，\u4f60 console \u51fa\u6765\u7684\u6570\u636e\u77ac\u95f4\u5c31\u6ca1\u4e86\u2014\u2014\u8fd9\u4e2a\u5751\u8e29\u8fc7\u7684\u4eba\u90fd\u61c2\u3002<\/p>\n
| \u6570\u636e\u5b58\u653e\u4f4d\u7f6e<\/td>\n | React state<\/td>\n | DOM \u8282\u70b9\u81ea\u8eab<\/td>\n<\/tr>\n |
| \u53d6\u503c\u65b9\u5f0f<\/td>\n | state \u53d8\u91cf<\/td>\n | ref.current.value<\/td>\n<\/tr>\n |
| \u66f4\u65b0\u65b9\u5f0f<\/td>\n | onChange \u89e6\u53d1 setState<\/td>\n | \u6d4f\u89c8\u5668\u81ea\u52a8，\u65e0\u9700\u5e72\u9884<\/td>\n<\/tr>\n |
| \u5b9e\u65f6\u6821\u9a8c \/ \u5b9e\u65f6\u8054\u52a8<\/td>\n | \u652f\u6301，\u7b80\u5355<\/td>\n | \u4e0d\u652f\u6301，\u5f88\u9ebb\u70e6<\/td>\n<\/tr>\n |
| \u6bcf\u6b21\u8f93\u5165\u90fd re-render<\/td>\n | \u4f1a<\/td>\n | \u4e0d\u4f1a<\/td>\n<\/tr>\n |
| \u4ee3\u7801\u91cf<\/td>\n | \u591a\u4e00\u4e9b<\/td>\n | \u5c11\u4e00\u4e9b<\/td>\n<\/tr>\n |
| \u5178\u578b\u573a\u666f<\/td>\n | \u8868\u5355\u6821\u9a8c\u3001\u5b9e\u65f6\u641c\u7d22\u3001\u8054\u52a8<\/td>\n | \u8bc4\u8bba\u533a\u3001\u6587\u4ef6\u4e0a\u4f20\u3001\u4e00\u6b21\u6027\u8868\u5355<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \u8bb0\u4f4f\u8fd9\u4e2a\u5224\u65ad\u53e3\u8bc0：<\/p>\n
|