[react] 受控组件和非受控组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了[react] 受控组件和非受控组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是受控?

就是比如一个文本框,你可以随便输入就是受控,他收到状态的影响

    <div className="App"  >
      受控<input value={name}></input><br />
      非受控<input defaultValue={name}></input>
    </div >

你想强行改?浏览器报错!

[react] 受控组件和非受控组件,react.js,javascript,前端

改成双向绑定就可了

  受控<input value={name} onChange={(e) => { setName(e.target.value) }}></input><br />

受控有啥用?因为受到我控制,我可以让他输入变为大10倍输出,当然我这例子没有意义,你可以做别的操作

function App() {
  const [num, setNum] = useState(1);


  return (
    <div className="App"  >
      受控<input type="number" value={num} onChange={(e) => { setNum(parseInt(e.target.value) * 10) }}></input><br />
      非受控<input defaultValue={num}></input>
      <div>输出的是 {num}</div>
    </div >
  );
}

怎么获取两个组件的值?

1受控就直接打印state

2.非受控获取ref

function App() {
  const [num, setNum] = useState(11);
  const fsk = useRef<HTMLInputElement>(null)

  return (
    <div className="App"  >
      受控<input type="number" value={num} onChange={(e) => { setNum(parseInt(e.target.value) * 10) }}></input><br />
      非受控<input ref={fsk} defaultValue={num}></input>
      <button onClick={() => {
        console.log('输出的是受控组件是', num);
        console.log('输出的是非受控组件是', fsk.current?.value);
      }}>打印结果</button>
    </div >
  );
}