我正在使用React.js和JQuery来构建登录页面。我想在提交一些数据后让按钮消失。
我想知道是否有更好的方法可以使用React.js删除html元素(按钮),而不是仅仅使用JQuery命令$('button')。remove()?谢谢!
答案 0 :(得分:1)
在React.js中,有一种不同于jQuery的方法。
最简单的选择是将变量设置为状态,指示是否应显示按钮。在执行某些操作(在您的情况下提交一些数据)后,此变量会更改,这将自动“删除”按钮。
示例:
import React from 'react';
class Page extends React.Component {
constructor() {
super();
this.state = {
showButton: true
};
}
disappearButton() {
this.setState({
showButton: false
});
}
render() {
return (
<div>
{this.state.showButton && (<button>Here is the button</button>)}
<span onClick={this.disappearButton.bind(this)}>Make the button disappear</span>
</div>
)
}
}
答案 1 :(得分:0)
当然有。您可以在提交表单时设置状态。
您的初始状态为origin/master
,您可以在提交处理程序中调用this.state.isButtonRemoved = false
。
在你的JSX按钮中,你会在渲染之前做一个if语句。由于React将在对State进行任何更改后重新呈现,因此在单击submit后它将消失。
this.setState({isButtonRemoved: true})
我写了ES5,因为我不知道你是否已经在使用ES6(你应该!)
答案 2 :(得分:0)
您可以通过React.useRef
隐藏/删除元素,您需要初始化useRef,如下所示:
const wrapperRef = useRef(null);
然后将此wrapperRef
绑定到您的元素:
<section className="class" id="com" ref={wrapperRef}>
当此元素呈现时,您将拥有具有该组件的所有html属性的wrapperRef对象,您可以相应地删除/操作任何内容!
快乐编码!