《React-受控组件与非受控组件》

一个input输入框，只有当我们绑定了它的value属性并且监听change/input事件，把用户输入的值拿到。才是受控的。 比如：

const NoteSection: React.FC=()=>{
    const [note,setNote]=useState('')
    return (
        <NoteWrapper>
            <label>
                <span>备注：</span>
                <input type='text' placeholder='在这里写备注~'
                value={note} onChange={(e)=>{setNote(e.target.value)}}/>
            </label>
        </NoteWrapper>
    )
}

非受控的写法：

const NoteSection: React.FC=()=>{
    const [note,setNote]=useState('')
    const refInput=useRef<HTMLInputElement>(null)
    const x=()=>{
        if(refInput.current!==null){
            setNote(refInput.current.value)
        }
    }
    return (
        <NoteWrapper>
            <label>
                <span>备注：</span>
                <input type='text' placeholder='在这里写备注~'
                ref={refInput} defaultValue={note} onBlur={x}/>
            </label>
        </NoteWrapper>
    )
}

绑定的是defaultValue ，监听onBur事件，只有当用户把鼠标移出，才触发。用ref拿到用户输入的值。

如何选择？受控行就用受控，不行就用非受控。

HTML的change事件会在鼠标移走，在其他地方点一下再触发。React的onChange事件在你开始输入的时候就会触发，和html不一样。