Изменить класс Элемента внутри Модал - PullRequest
Новая
       19

Изменить класс Элемента внутри Модал

0 голосов
/ 17 февраля 2019

Я пытаюсь изменить атрибут "класс" div-элемента внутри модала по нажатию кнопки (кнопка не в модале), пока модал не отображается.Элемент представляет собой обычную текстовую строку, и модал, который я использую, взят из фреймворка Reaction-Boosttrap.

Я попытался сделать это с: 

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

, но элемент не существует,модал не показывает.Поэтому я получаю исключение при выполнении этого кода.

Я что-то упустил в своем коде или есть какой-либо другой способ установить свойство класса этого элемента?

Заранее спасибо!

1 Ответ

0 голосов
/ 17 февраля 2019

Вместо того, чтобы пытаться манипулировать 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>
...