用户登录

在组件的状态里添加一个属性,名字是 content,类型是 string。然后在组件默认的状态里再添加一个 content,默认值是一个空白字符 。

改一下 onChange 方法,把 value 从 event 里的 currentTarget 里解构出来,执行 this.setState,设置一下 content 这个状态的值,让它等于 value。

再改一下组件视图,添加一个 text 类型的 input 元素。在这个元素上再添加一个 value 属性,值是 this.state.content。

现在界面上有个文本框,我希望用户在按了 ctrl + e 按键组合以后,让这个文本框进入焦点状态。

我们可以使用 React 提供的 ref,引用在页面上显示的这个文本框,然后在监听窗口的按键事件,如果按的是 ctrl + e ,就调用文本框元素的 focus 方法,让它进入焦点状态。

先从 react 组件里导入 createRef,然后在组件里用这个方法创建一个 ref,添加一个 contentField,用一下 createRef 这个方法,设置一下元素类型,这个 ref 要用在 HTMLInputElement 这种元素上。找到这个文本框元素,在上面添加一个 ref 属性,值是 this.contentFiled。

组件被挂载以后,我们可以监听一下发生在窗口里的键盘事件,添加一个 componentDidMount 生命周期,里面用一下 window.addEventListener 监听一下 keydown 事件,用 this.onKeyDown 来处理它。

取消挂载组件的时候要去掉这个事件监听器,添加一个 componentWillUnmount 生命周期,取消挂载组件的时候会执行这个方法,在这个方法里用一下 window.removeEventListener 取消监听 keydown 事件,处理器是 this.onKeyDown。

下面可以定义一下这个方法,添加一个类字段,名字是 onKeyDown,它的值是一个方法,有个 event 参数,类型是 KeyboardEvent。

在这个方法里,用 if 判断一下 event.key 是不是等于 e,并且 event.ctrlKey,也就是如果用户按的是按键 e,同时按住了 ctrl 键,这种情况下, 可以执行一下 this.contentField.current? 上面的 focus() 方法,这会让组件里的那个文本框进入焦点状态。

在浏览器测试一下,按一下 ctrl + e,你会发现这个文本框会进入焦点状态。

使用 ref 控制文本框的焦点状态《 React 前端应用开发:表单元素 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点