React中value={foo}属性的作用是什么？是否用于数据绑定？

对，value={foo}就是用来实现数据双向绑定的核心配置，对应React里的「受控组件」概念，和你代码里第二个未设置value的input有本质区别：

两种input的核心差异 #

1. 第一个input（受控组件）
   它的显示值完全由foo这个state变量控制：

   • 用户输入时，onChange触发setFoo更新state
   • state更新后，React会重新渲染组件，把最新的foo值赋值给input的value，让input显示同步更新
     形成「用户输入→更新state→同步UI」的闭环，你能完全掌控输入的状态。

2. 第二个input（不受控组件）
   它的值由浏览器DOM自身管理，你只是在用户输入时把值同步到bar状态里，但bar的变化不会反过来影响input的显示：

   • 比如你手动调用setBar(100)，bar会变成100，但第二个input的显示不会跟着变，还是停留在用户之前输入的内容。

受控组件的实用场景 #

当你需要：

• 做输入验证（比如只允许输入数字，输入非数字时不更新state，input就不会显示错误内容）
• 格式化输入内容（比如输入数字时自动添加千分位）
• 实时同步输入状态到其他组件
• 主动重置输入值（比如点击按钮清空input）
  这些场景下必须用受控组件，value={state}就是实现这个逻辑的关键。

直观测试例子 #

在你的代码里加两个按钮试试：

<button onClick={() => setFoo(50)}>设置foo为50</button>
<button onClick={() => setBar(50)}>设置bar为50</button>

点击第一个按钮，第一个input会立刻显示50；点击第二个按钮，bar变成50，但第二个input的显示毫无变化——这就是受控和不受控的最直观区别。

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