使用React.js删除html元素

时间:2015-07-03 00:13:15

标签: jquery reactjs

我正在使用React.js和JQuery来构建登录页面。我想在提交一些数据后让按钮消失。

我想知道是否有更好的方法可以使用React.js删除html元素(按钮),而不是仅仅使用JQuery命令$('button')。remove()?谢谢!

3 个答案:

答案 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对象,您可以相应地删除/操作任何内容!

快乐编码!