左边是一个货真价实的 React 受控表单,右边的按钮分别用「想当然的写法」和「正确的写法」去操控它。
两个结论都可以亲手点出来:直接赋值 React 收不到、click() 打不开下拉。
原理见 让 React 受控组件看见你写的值。
下面每个控件的值都来自 React state。手动打字会更新 state;程序化写入未必。
这不是读 DOM,是组件自己 render 出来的。DOM 上看得见但这里没变 = React 没收到。
el.value = v
会把 DOM 值和追踪器一起改掉,于是随后派的 input 事件在 React 看来「值没变」,
整个事件被当成空操作丢弃。
按顺序点这三个。第三个会告诉你一件很反直觉的事:直接赋值不只是「不生效」, 它还会把追踪器一起带偏——之后你用正确写法写同一个值,React 依然认为「没变」。 所以「先试直接赋值,不行再换 setter」这个很自然的调试顺序,会让你误判正确写法也失败。
mousedown,而 HTMLElement.click()
只派 click 事件,面板根本不会开。
下拉开了之后,还要 waitFor 等选项真的渲染出来再点——选项常常是异步来的。
下面列出的是驱动器按可见 label 文本找到的字段。点一下「注入一个徽标」,看 label 匹配怎么当场坏掉。