React.js中单个onClick点击事件同时触发两个动作的实现问题

问题原因 #

你使用的文本框是React受控组件，value属性完全绑定状态userInput，直接通过原生DOM API修改输入框值的操作不符合受控组件的使用规范：
调用setSearchStu会触发组件重渲染，React会读取当前userInput的最新值覆盖DOM的内容，因此你手动修改的空值会被原有状态冲掉。而去掉setSearchStu时没有触发组件重渲染，所以DOM修改的结果能暂时保留。

解决方案 #

不要直接操作DOM修改输入框值，直接更新绑定的userInput状态即可：

<input
  type="submit"
  value="Reset"
  onClick={() => {
    setSearchStu(student);
    setUserInput(''); // 直接更新绑定状态实现清空输入框
  }}
/>

受控组件的所有视图变更都应该通过React状态更新来完成，才能保证状态和视图的一致性。

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