状态内设置值时默认值会发生变化

Question

我想创建一个比较值和默认值的验证，但是当我在状态内设置值时，默认值也会更改以匹配该值。

我们可以从ref中查看默认值和值

const [value, setValue] = useState('helo')

<form onChange={e => console.log(e)}>
  <input
    defaultValue={5}
    value={value}
    onChange={e => {
      const format = () => {};
      setValue(format(e.target.value))
    }
  />
</form>

但是当该值不受控制时，默认值的行为与预期一致。

<form onChange={e => console.log(e)}>
  <input defaultValue={5} />
</form>

Answer 1

正如 Drew Reese 在评论中所述，React 的设计并非允许同时允许 defaultValue 和 value。从逻辑上讲，如果您有一个值，则 defaultValue 是多余的：它的默认值将是起始值。

在这支笔中可以看到，使用代码的简化版本：https://codepen.io/Razzi-Abuissa/pen/ExBBdYm

function Example() {
  const [value, setValue] = React.useState('helo')

  return <form>
    <input defaultValue={5} value={value} onChange={e => setValue(e.target.value)} />
  </form>
} 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example />)

在控制台中你可以看到React给出以下警告：

警告：示例包含未定义类型的输入，同时带有 value 和 defaultValue 属性。输入元素必须是受控或不受控的（指定 value 属性或 defaultValue 属性，但不能同时指定两者）。决定使用受控或不受控输入元素并删除这些道具之一。更多信息：https://reactjs.org/link/control-components