Передача события в React сделанных вне React

Question

только начинаю изучать React и столкнулся с проблемой, например, есть кнопка в DOM`е:

<button type="button" class="btn btn-success addImage">Добавить</button>

Есть React-компонент, например:

export default class Example extends React.PureComponent{
    constructor() {
        super();
        this.state = {
            showed : false,
        };
    }
    render() {
        const {showed} = this.state;
        return (
            {showed && <h1>Hello</h1>}
        )
    }
}

Так вот, как мне поменять state у этого компонента по клику на кнопку вне React-компонента?

Answer 1

Собственно, используются стандартные методы чистого js, слушатель вешается в componentDidMount, отключаем слушатель componentWillUnmount

// Находим нашу кнопку и сохраняем в переменную
const button = document.getElementsByClassName('addImage')[0];

class Example extends React.PureComponent {
  constructor () {
    super();
    this.state = {
      showed : false,
    };
  }
  componentDidMount () {
    // После рендера компонента вешаем слушатель на нашу кнопку
    button.addEventListener('click', this.show);
  }
  componentWillUnmount () {
    // Отключаем слушатель, когда компонент не отрисовывается
    button.removeEventListener('click', this.show);
  }
  // Метод меняющий state при клике
  show = () => {
    this.setState({ showed: true });
  }
  render () {
    const { showed } = this.state;

    return showed && <h1>Hello</h1>;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

<div id="root"></div>
<button type="button" class="btn btn-success addImage">Добавить</button>
<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>

БЛОГ НА HUSL

Передача события в React сделанных вне React

Ответы (1 шт):