React点击文本更新搜索框值后无法触发onKeyUp搜索事件如何解决

通过setState修改input绑定的value属于程序层面的状态更新，不会触发用户交互类的键盘事件onKeyUp，onKeyUp仅在用户物理触发键盘按键抬起动作时才会被React合成事件系统捕获执行，因此你点击文本更新输入框值后不会自动触发搜索逻辑。

修复代码 #

不需要手动模拟触发键盘事件，直接在onClickChange的setState异步回调中调用search方法即可，setState的第二个参数是状态更新完成后的回调函数，此时可以拿到最新的searchValue执行搜索：

class Search extends React.Component {
    constructor(props) {
       super(props)
       this.state = {
           searchValue : null
       }
       this.onChange = this.onChange.bind(this)
       this.onClickChange = this.onClickChange.bind(this)
    }

    onChange(e) {
        this.setState({
            searchValue: e.target.value
        })
    }
    onClickChange(e) {
        this.setState({
            searchValue: e.target.innerText
        }, () => {
            // 状态更新完成后调用已有的搜索逻辑
            this.search()
        });
    }

    search() {
        // working function no need to modify
    }

    render() {
        // 补充React要求的单个根节点包裹
        return (
            <>
                <input type="text" id="Search" className="form-control" placeholder="Search" onKeyUp={() => this.search()} onChange={this.onChange} value={this.state.searchValue}/>
                <span onClick={this.onClickChange}>CUSTOM</span>
            </>
        )
    }
}

该方案仅修改onClickChange逻辑，不需要改动原有搜索逻辑和输入框事件绑定，代码改动量最小。

内容的提问来源于stack exchange，提问作者user8852790