将jquery转换为响应js的HOw
将jquery转换为响应js的HOw
提问于 2020-02-17 09:23:57
我有jquery代码，如何将它转换为响应js，我想要实现onfocus和onblur在输入上添加和删除特定div上的类。
任何人都不知道我们怎样才能做到这一点。
$("input#password").focus(function() {
$("#overlay").addClass("newoverlay");
}).blur(function() {
$("#overlay").removeClass("newoverlay");
});<div id="overlay" class="">Focus/Blur</div>
<input type="txt" id="password"/>回答 3
Stack Overflow用户
发布于 2020-02-17 10:06:26
import React from 'react';
const foo: React.FC = () => {
const [isFocused, setFocus] = React.useState(false);
const handleFocus = () => {
setFocus(true);
};
const handleBlur = () => {
setFocus(false);
};
return (
<div
className={`someClass ${isFocused && 'focus'}`}
onFocus={handleFocus}
onBlur={handleBlur}
>
hello
</div>
);
}
export default foo;这是你要找的密码。
您可以在下面的链接https://reactjs.org/docs/events.html中检查react事件
同时也使用类名或clsx是个好主意。
Stack Overflow用户
发布于 2020-02-17 09:37:21
无需将该代码从jQuery转换为“React”。简单的方法是只包含'$‘--添加代码，类似于下面的方法。看起来不错。
import React from 'react';
import $ from 'jquery';
function ExampleFunction(props) {
$(document).ready(function() {
$("input#password").focus(function() {
$("#overlay").addClass("newoverlay");
}).blur(function() {
$("#overlay").removeClass("newoverlay");
});
});
return (<React.Fragment>
<div> Your code </div>
</React.Fragment>);
}
export default ExampleFunction;您可能需要根据基于类的组件或功能组件更新此代码。
Stack Overflow用户
发布于 2020-02-17 09:57:44
如果不需要应用某个类，您可以只在焦点选择器中使用css。见这里focus.asp
例如
#overlay:focus {
some-property: true;
}然后在您的react安装程序中导入css文件。(例如，使用app)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60259291
复制相关文章
相似问题
腾讯云开发者
