反应 onchange 处理程序继续默认操作

Question

我有一个输入，我想在它发生变化时做某事，而不妨碍它的本机处理（不使其成为受控输入）

<input onChange={(e)=>{
    something(e.target.value)
    //maybe continueDefault() to make it still accept input
}}/>

如何让它继续其默认操作，即允许它在使用数据调用我的 something() 函数后接收和附加文本输入？

我想允许这样做，而不必将输入设为 controlled input，即不使用 state 来存储其值。

Answer 1

我认为您应该使用 ref、广告和事件处理程序。类似的东西（未经测试）

const MyComponent = () => {
  
    const ref = useRef();

    useEffect(() => {
        const onChange = () => {
            something(ref.current.value)
        }
        ref.current.addEventListerner("change", onChange)
        return () => {
            ref.current.removeEventListener("change", onChange)
        }
    })

    return (
        <input ref={ref} />
    )

}
    const ref = useRef();

    useEffect(() => {
        const onChange = () => {
            something(ref.current.value)
        }
        ref.current.addEventListerner("change", onChange)
        return () => ref.current.removeEventListener("change", onChange)
    })

    return (
        <input ref={ref} />
    )

}