Question

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

我尝试使用以下方法进行

：

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

但该元素不存在，因为未显示模式。因此，运行此代码时出现异常。

我是否在代码中缺少某些内容，或者是否有其他方法可以设置该元素的class属性？

谢谢！

Answer 1

您可以代替状态className来更改模态，而不必尝试手动操作DOM。这样一来，更改模式时是否可见都不重要。

示例

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>

更改模态内元素的类别

1 个答案: