react中input自动聚焦问题
2024-10-12 05:18:53
input自动聚焦问题
在react中可以使用refs解决这个问题,首先看一下refs的使用场景:
(1)处理焦点、文本选择或媒体控制。
(2)触发强制动画。
(3)集成第三方 DOM 库。
使用refs解决input聚焦的问题有两种应用场景:
1、组件内部:
在input内部定义ref,当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。例如,下面的代码使用 ref 回调来存储 DOM 节点的引用。
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
} focus() {
// 直接使用原生 API 使 text 输入框获得焦点
this.textInput.focus();
} render() {
// 使用 `ref` 的回调将 text 输入框的 DOM 节点存储到 React
// 实例上(比如 this.textInput)
return (
<div>
<input type="text" ref={(input) => { this.textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}
2、父子组件:
子组件内input定义为:
import React from 'react'; class Input extends React.Component {
constructor(props){
super(props);
}; render() {
return <input type="text" ref={this.props.inputRef}/>;
}
} export default Input;
父组件调用方法:
<Input name="中文姓" id="surname" placeholder="与身份证一致" inputRef={el => this.surname = el}/> componentDidMount() {
this.surname.focus();
}
最新文章
- 基站查询接口,基站查询API
- SSH新学
- HTML之表格制作
- mono+jexus 验证码不显示:System.Drawing
- MySQL日志概述
- ios开发之代理&;&;协议(补充篇)
- Swift--集合类型 数组 字典 集合
- 笔记:Struts2 国际化
- 数字化IT人才与组织
- ASP.NET上传大文件报错,IIS7.0
- webstorm 2017 激活破解方法大全
- 使用命名管道的OVERLAPPED方式实现非阻塞模式编程 .
- c# group by list
- HTML5 Storage(永久存储)
- json批量设置DIV属性
- nginx为什么性能这么优越?
- 分布式数据库中间件Mycat百亿级数据存储(转)
- win7利用winSCP上传文件到ubuntu server
- OC之block 和协议
- Python3.x:定时自动发送邮件