ReactJS: где в проекте поместить функцию Javascript, которая вызывается при возникновении события onclick () - PullRequest
Новая
       6

ReactJS: где в проекте поместить функцию Javascript, которая вызывается при возникновении события onclick ()

0 голосов
/ 28 марта 2020

Я новичок в ReactJS и работаю над следующим компонентом:

request-item.jsx 

import React, { Component } from 'react';
import { connect } from 'react-redux';

import './request-item.scss';

class RequestItem extends Component {
    render() {
        return (
            <div class="request-box">
                <div class="request-details">
                    <div class="information">
                      <h1>Table 9, 3:00PM</h1>
                      <h2>Request made 6 min ago.</h2>
                    </div>
                    <div class="status-button">
                        <button type="button" class="request-button">Assistance Requested</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default RequestItem;

Этот компонент является частью следующей страницы: 

import React from 'react';
import { connect } from 'react-redux';

import RequestItem from '../../components/request-item/request-item.component';

import './requestlistpage.scss';

class RequestListPage extends React.Component {

    render() {
        return (
            <div>
                <h1>Requests</h1>
                <div className="requests-container">
                    <RequestItem />
                    <RequestItem />
                    <RequestItem />
                    <RequestItem />
                    <RequestItem />
                    <RequestItem />
                    <RequestItem />
                </div>
            </div>
        )
    }
}

export default RequestListPage;

Когда я нажимаю кнопку запроса, я хочу, чтобы текст на кнопке сменился с «Запрошенная помощь» на «Завершено».

Я знаю, что это можно сделать следующим образом: 

<button onclick="change()" type="button" id="button-1" class="request-button">Assistance Requested</button>

function change() 
{
    var elem = document.getElementById("button-1");
    if (elem.value=="Assistance Requested") elem.value = "Completed";
    else elem.value = "Assistance Requested";
}

Если бы я просто работал с HTML / CSS / Javascript, у меня была бы функция change() в отдельный файл и включите этот файл в файл HTML.

Однако, поскольку я работаю с React, я не уверен, что такое соглашение. Моя структура проекта выглядит следующим образом: 

src 
  > assets
  > components
  > pages
  > redux

Если бы у меня была такая функция, как change(), которая вызывается всякий раз, когда происходит событие onclick(), где бы я включил эту функцию в проект React? Любые идеи приветствуются.

1 Ответ

0 голосов
/ 28 марта 2020

Вот очень простое решение 

class RequestItem extends Component {
  this.state = {
    status: "Assistance Requested", // Initial State
  }

  // Handle your state changes here
  toggleStatus = () => { 
    if (this.state.status === "Assistance Requested") {
      // UI re-renders when setState is invoked
      this.setState({ status: "Completed" });
    } else {
      this.setState({ status: "Assistance Requested" });
    }
  };

  render() {
    return (
      <div class="request-box">
        <div class="request-details">
          <div class="information">
            <h1>Table 9, 3:00PM</h1>
            <h2>Request made 6 min ago.</h2>
          </div>
          <div class="status-button">
            <button type="button" class="request-button" onClick={this.toggleStatus}>
              {this.state.status}
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default RequestItem;

В ответ вы обрабатываете изменения в своем пользовательском интерфейсе, используя комбинацию state и props. Props передается от родителя к потомку, тогда как state содержит логи уровня компонента c.

В вашем случае changeStatus будет функцией-обработчиком, где вы обрабатываете логи c изменяется при нажатии кнопки. Все изменения, связанные с пользовательским интерфейсом, хранятся в state, потому что всякий раз, когда вызывается функция setState, обновляется state, и реагирует, ищет изменения и снова вызывает функцию render для обновления пользовательского интерфейса.

Вы можете изучить стандартные практики, изучив учебник на веб-сайте или взглянув на Основные понятия .

...