在Modal中更改Element的类

Question

我试图在按钮单击（按钮不在模态）中更改模态内的div元素的属性“class”，而模式未显示。元素是常规文本行，我使用的模式来自react-bootstrap框架。

我试过这样做：

onClickButton(){
  document.getElementById("elementID").setAttribute("class","toSomething");
}

但元素不存在，因为模态没有显示。因此，我得到一个运行此代码的异常。

我在代码中遗漏了什么，或者是否有其他方法来设置该元素的class属性？

提前致谢！

Answer 1

而不是尝试手动操作DOM，您可以更改状态中的变量，用作模态的className。这样，当您更改模态时，模态是否可见并不重要。

例

ReactModal.setAppElement("#root");

class App extends React.Component {
  state = {
    modalIsOpen: false,
    color: "green"
  };

  openModal = () => {
    this.setState({ modalIsOpen: true });
  };

  closeModal = () => {
    this.setState({ modalIsOpen: false });
  };

  toggleColor = () => {
    this.setState(({ color }) => ({
      color: color === "green" ? "red" : "green"
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <ReactModal isOpen={this.state.modalIsOpen}>
          <div className={this.state.color}>Modal content</div>
          <button onClick={this.closeModal}> Close </button>
        </ReactModal>
        <button onClick={this.toggleColor}>Toggle color</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.8.1/react-modal.min.js"></script>

<div id="root"></div>