[react] 受控组件和非受控组件

什么是受控?

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

    
      受控

      非受控
    

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

改成双向绑定就可了

  受控 { setName(e.target.value) }}>

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

function App() {
  const [num, setNum] = useState(1);
  return (
    
      受控 { setNum(parseInt(e.target.value) * 10) }}>

      非受控
      输出的是 {num}
    
  );
}

怎么获取两个组件的值?

1受控就直接打印state

2.非受控获取ref

function App() {
  const [num, setNum] = useState(11);
  const fsk = useRef(null)
  return (
    
      受控 { setNum(parseInt(e.target.value) * 10) }}>

      非受控
       {
        console.log('输出的是受控组件是', num);
        console.log('输出的是非受控组件是', fsk.current?.value);
      }}>打印结果
    
  );
}

总结

受控就是受到state影响,除非你用onchange,否则不能编辑

非受控可自由编辑