logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

使用 ref 控制文本框的焦点状态

  • 在组件状态中添加一个名为content的string属性,默认值为一个空字符。
  • 更新onChange方法来结构出事件对象event中的value,并设置状态content为该value
  • 修改组件视图,添加一个text类型的input元素,并将其value属性设置为状态content
  • 实现按下CTRL+E组合键后,输入框获取焦点,通过引入React的createRef方法创建一个引用(ref)指向文本框。
  • 在组件挂载后设置键盘事件监听,当检测到按键econtrol键同时按下时,调用文本框的focus方法使其获得焦点。
  • 组件卸载时移除键盘事件监听器。
  • 在React组件类中定义处理键盘事件的方法,检查是否按下CTRL+E,如果是,使文本框获得焦点。
  • 可以在浏览器中测试功能,按下CTRL+E后文本框应获得焦点。