React双向绑定判定及input组件value属性作用答疑

1. 你的第二段实现不属于React双向绑定 #

React里的双向绑定核心是数据从组件state流向UI，同时UI的用户操作能实时同步回state，形成即时的闭环同步。对比你提供的两段代码：

• 第一段是标准的双向绑定实现：input的value绑定了state变量playerName，onChange事件实时把输入内容同步到playerName中。编辑状态下，输入框内容和state完全同步，每输入一个字符都会触发state更新和组件重渲染，完全符合双向绑定逻辑。
• 第二段里，input没有绑定value到state，输入时仅把值存在普通变量editingPlayerName里——这个变量不是React状态，组件不会因它的变化重新渲染。只有点击按钮时，才手动把变量值同步到playerName state来更新h2。这是手动触发的单向数据传递，输入过程中state和input值没有实时同步，不属于双向绑定。

2. input的value属性作用 & 不设置也能输入的原因 #

input value属性的作用 #

value属性用来接管输入框的显示内容控制权：

• 当设置value={state变量}时，输入框内容完全由该state变量决定，此时input是受控组件——React通过state完全控制输入框状态，输入框的任何变化都需要通过onChange事件更新state，才能反馈到UI上。
• 不设置value时，input处于非受控组件状态，内容由浏览器自身维护（DOM节点的原生value属性），React不会干预其内部状态。

为什么不设置value也能输入 #

浏览器原生input元素本身自带内部状态，用于存储用户输入内容。当不在React中设置value属性时，React不会覆盖这个原生行为，输入框会按照浏览器默认逻辑工作，用户输入的内容会直接显示在输入框里。

附两段代码 #

第一段代码（受控组件/双向绑定实现）

export default function Player({
  initialName,
  symbol,
  isActive,
  onPlayerNameChange,
}) {
  const [isEditing, setIsEditing] = useState(false);
  const [playerName, setPlayerName] = useState(initialName);

  function clickHandler() {
    setIsEditing((editing) => !editing);
    if (isEditing) {
      onPlayerNameChange(symbol, playerName);
    }
  }

  function handleChange(event) {
    setPlayerName(event.target.value);
  }

  return (
    <li className={isActive ? "active" : undefined}>
      <span className="player">
        {isEditing ? (
          <input
            type="text"
            required
            value={playerName}
            onChange={handleChange}
          />
        ) : (
          <span className="player-name">{playerName}</span>
        )}

        <span className="player-symbol">{symbol}</span>
      </span>
      <button onClick={clickHandler}>{isEditing ? "Save" : "Edit"}</button>
    </li>
  );
}

第二段代码（非受控组件/手动单向同步）

export default function Player() {
  let editingPlayerName = "";
  const [playerName, setPlayerName] = useState("");

  function handleChange(event) {
    editingPlayerName = event.target.value;
  }

  function handleClick() {
    setPlayerName(editingPlayerName);
  }

  return (
    <section id="player">
      <h2>Welcome {playerName ? playerName : "unknown entity"}</h2>
      <p>
        <input type="text" required onChange={handleChange} />
        <button onClick={handleClick}>Set Name</button>
      </p>
    </section>
  );
}

内容的提问来源于stack exchange，提问作者codean