[英]How to focus input when a user clicked on an input?
我尝试在 react.js 中创建一个搜索输入组件。 在这个组件中,我希望当用户单击搜索图标时,输入焦点及其宽度由 css3 过渡属性增加。 这是我的一段代码:
<input className={"news-search-v2"} type="text" />
<i className="material-icons"> search </i>
以及我的组件的手写笔代码
.news-search-v2
width 0px
transition: ease 0.5s all
&:focus
border-bottom solid 1px #5f6368
width 300px
Arnav Yagnik
答案是正确的,但不是React
解决方案。
如果您的组件是函数式组件,则可以使用useRef
钩子。
import React from 'react';
const FocusExample = () => {
const textInput = React.useRef(null);
const setFocus = React.useCallback(() => { textInput.current.focus() });
return (
<>
<input ref={textInput} className={"news-search-v2"} type="text" />
<i className="material-icons" onClick={setFocus}> search </i>
</>
);
};
或者,如果您使用基于分类的视图,请使用createRef
:
import React from 'react';
class FocusExample extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
setFocus = () => {
this.textInput.current.focus();
}
render() {
return(
<>
<input ref={this.textInput} className={"news-search-v2"} type="text" />
<i className="material-icons" onClick={this.setFocus}> search </i>
</>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.