react input 外部设置value

Question

做一个select和input的联动，就是select选择后将选中value处理，处理后的值放到input里面。
input的value和onchange必须一起使用，不然value不会变，所以效果就变成了点击了select，input还是空的，需要随便键盘输入后，input的值才显示。

如何变成input的值能立即改变？

Answer 1

果然日常犯傻。

            <Input
              value={inputValue} 
              onChange={this.handler} 
            />

外部改变inputValue，即使onChange不绑定方法或者绑定空方法，只要键盘输入都会使input显示该有的值。render更新的时候inputValue并没更新，导致input的值总为旧值。只需要在外部改变inputValue的方法中再次调用handler方法即可及时更新input的显示值。

Answer 2

// 处理被选中的值
const doSomeThing = (val) => {
    return val
}

const Component = () => {
    const [selected, updateSelected] = useState("")
    const [inputValue, updateInputValue] = useState("")
    
    // 改变被选中的值时会触发这个
    useEffect(() => {
        // 更新 input
        updateInputValue(doSomeThing(selected))
    }, [selected])

}