Блог

Главная - Вопросы по программированию - Как я могу заставить эту функцию работать при загрузке?

Как я могу заставить эту функцию работать при загрузке?

#jquery #reactjs

#jquery #reactjs

Вопрос:

Я пытался заставить эту функцию работать, когда componentDidMount но это не сработало.

 componentDidMount = () => {
    $('.button').click(function() {
        var buttonId = $(this).attr('id');
        $('#modal-container').removeAttr('class').addClass(buttonId);
        $('body').addClass('modal-active');
    });

    $('#modal-container').click(function() {
        $(this).addClass('out');
        $('body').removeClass('modal-active');
    });

    console.log("hi");
}

Комментарии:

1. Какая функция? Вы прикрепляете события.

2. Не могли бы вы описать ожидаемое поведение и то, что вы видите вместо этого? Также, пожалуйста, поделитесь JSX, о котором идет речь.

3. Нет необходимости превращать componentDidMount в функцию стрелки поля класса. Вы можете написать componentDidMount() { ... } . Могу я спросить, почему вы смешиваете React и jQuery?

Ответ №1:

Я предполагаю, что вы хотите изменить класс элемента. Вам не нужно использовать componentDidMount(). Итак, я добавил пример ниже.

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {addClass: false}
  }
  toggle() {
    this.setState({addClass: !this.state.addClass});
  }
  render() {
    let boxClass = ["box"];
    if(this.state.addClass) {
      boxClass.push('green');
    }
    return(
        <div className={boxClass.join(' ')} onClick={this.toggle.bind(this)}>{this.state.addClass ? "Remove a class" : "Add a class (click the box)"}<br />Read the tutorial <a href="http://www.automationfuel.com" target="_blank">here</a>.</div>       
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));  
 .box {
  display: block;
  width: 200px;
  height: 200px;
  background-color: gray;
  color: white;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.box.green {
  background-color: green; 
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root">
</div>