使用React.js删除html元素

Question

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

我想知道与仅仅使用JQuery命令$(‘React.js’).remove()相比，是否有更好的方法用按钮删除html元素(按钮)？谢谢!

Answer 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>
    )
  }
}

Answer 2

当然有。您可以在提交表单时设置状态。

您将拥有this.state.isButtonRemoved = false的初始状态，并在提交处理程序中调用this.setState({isButtonRemoved: true})。

在您的按钮JSX中，您将在呈现之前执行一条if语句。由于React将在对State进行任何更改后重新呈现，因此它将在单击submit后消失。

render: function() {
  var button = '';
  if(!this.state.isButtonRemoved) {
    button = (<button type="submit">I will disappear after clicking</button>);
  }
  return(
    {button}
  );
}

我之所以编写ES5，是因为我不知道您是否已经在使用ES6了(您应该这样做！)

Answer 3

您可以通过React.useRef隐藏/删除元素，您需要初始化useRef，如下所示：

const wrapperRef = useRef(null);

然后将此wrapperRef绑定到您的元素：

<section className="class" id="com" ref={wrapperRef}>

当此元素呈现时，您将拥有包含该组件的所有html属性的wrapperRef对象，您可以相应地删除/操作任何内容！！

祝你编码愉快！