Question

有2个div。 div1和div2。最初，显示div1并隐藏div2。单击按钮，必须隐藏div1，div2应显示在div1的位置。

Answer 1

创建一个状态，以指示是要显示div1还是要显示div2。然后，向按钮添加onClick处理函数。最后，有条件地呈现根据该状态显示哪个组件。

代码：

class TwoDivs extends React.Component {
  state = {
    div1Shown: true,
  }

  handleButtonClick() {
    this.setState({
      div1Shown: false,
    });
  }

  render() {

    return (
      <div>
        <button onClick={() => this.handleButtonClick()}>Show div2</button>
        {
        this.state.div1Shown ? 
           (<div className="div1">Div1</div>) 
           : (<div className="div2">Div2</div>)
        }
      </div>
    );
  }
}

Answer 2

您可以通过在组件的状态中添加新属性来实现它。由于 setState 方法，单击该按钮只会切换该状态，组件将重新渲染。请注意，这将在两个div之间切换。如果您只想显示第二个，请设置如下所示的新状态：this.setState({firstDivIsActive: false}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstDivIsActive: true
    };
  }

  render() {
    let activeDiv;

    if (this.state.firstDivIsActive) {
      activeDiv = <div>I am one</div>;
    } else {
      activeDiv = <div>I am two</div>;
    }

    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              firstDivIsActive: !this.state.firstDivIsActive
            });
          }}
        >
          Toggle Div
        </button>
        {activeDiv}
      </div>
    );
  }
}

Answer 3

我会在下面简单的HTML和JQuery中完成如下操作：

<input id="DivType" type="hidden" value="div1" class="valid" />
<div id="div1" />
<div id="div2" />


function ToggleDiv() {
    var divType = $("#DivType").val();

    if (divType === "div1") {
        $("#div1").show();
        $("#div2").hide();
        $('#DivType input').value = "div2";
    }
    else if (divType === "div2") {
        $("#div1").show();
        $("#div2").hide();
        $('#DivType input').value = "div1";
    }
}

ToggleDiv将在OnClick按钮事件中被调用。

不确定在React中是否有更好的方法。

Answer 4

class ToggleDivs扩展了React.Component {

state = {
  showDiv1: true,
}

handleButtonClick() {
  this.setState({
    showDiv1: !this.state.showDiv1
  });
}

render() {
  const { showDiv1 } = this.state;
  const buttonTitle = showDiv1 ? 'Div2' : 'Div1';

  const div1 = (<div className="div1">Div1</div>);
  const div2 = (<div className="div2">Div2</div>);

  return (
    <div>
      <button onClick={() => this.handleButtonClick()}>Show {buttonTitle}</button>
      {showDiv1 ? div1 : div2}
    </div>
  );
}

}

如何隐藏div并用reactjs中的另一个div替换它？

4 个答案: