ReactJS: Создание класса счетчика, который увеличивается на динамическое значение (передается через реквизит и сохраняется в состоянии) - PullRequest
Новая
       9

ReactJS: Создание класса счетчика, который увеличивается на динамическое значение (передается через реквизит и сохраняется в состоянии)

1 голос
/ 09 июня 2019

Вот некоторый код, который дает работающий пример, он должен работать, если вы откроете его в Firefox (у меня были проблемы с Chrome).

Когда вы нажимаете кнопку, число рядом с количеством слов увеличивается на значение, отображаемое на кнопке (1, 5 или 10).

Код, который производит желаемый вывод 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">

    var CounterChallenge = React.createClass({
      getInitialState: function() {
        return {
          count: 0
        }
      },
      incrementCountByOne: function(value) {
        this.setState({
          count: this.state.count + 1
        })
      },
      incrementCountByFive: function() {
        this.setState({
          count: this.state.count + 5
        })
      },
      incrementCountByTen: function() {
        this.setState({
          count: this.state.count + 10
        })
      },
      render: function() {
        return (
          <div className="container">
            <h1>Count: {this.state.count}</h1>
            <button className="btn blue-btn" onClick={this.incrementCountByOne}>Add 1</button>
            <button className="btn green-btn" onClick={this.incrementCountByFive}>Add 5</button>
            <button className="btn purple-btn" onClick={this.incrementCountByTen}>Add 10</button>
          </div>
        )
      }
    });

    ReactDOM.render(
      <CounterChallenge />,
      document.getElementById('app')
    );
    </script>
  </body>
</html>

----------------------------------------------- ------------------------

Я пытаюсь написать эту программу по-другому, создав класс кнопок, который имеет только одну функцию приращения (вместо increment1, increment5, increment10, как вы можете видеть в приведенном выше коде.)

Я бы хотел, чтобы приведенный ниже код работал точно так же, как приведенный выше.

Я инициализирую состояние переменной с именем count в базовом классе (Challenge), который реагирует на рендеринг в DOM. Внутри класса ChallengeButton я увеличиваю значение, хранящееся в count (на 1, 5 или 10, в зависимости от того, какое значение передается в переменной incCount)

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

Моя программа (которую я хотел бы отладить) 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">

      var ChallengeButton = React.createClass({
        increment: function(){
          this.setState({
            count: this.state.count + this.props.incCount
          })
        },
        render: function(){
          return{
            <button onClick={this.increment} incCount={this.props.incCount}></button>
          }
        }
      });

      var Challenge = React.createClass({
        getInitialState: function(){
          return{
            count: 0
        },
        render: function(){
          return {
            <div>
              <h1>Count: {this.state.count}</h1>
              <ChallengeButton className="blue-btn" incCount='1'/>
              <ChallengeButton className="red-btn" incCount='5' />
              <ChallengeButton className="green-btn" incCount='10' />
            </div>
          }
       }
      });

      ReactDOM.render(
        <Challenge />,
        document.getElementById('app')
      );
    </script>
  </body>
</html>

----------------------------------------------- ------------------------

Сопровождающий файл CSS (не требует отладки) 

body {
  padding: 40px;
  font-family: "helvetica neue", sans-serif;
}

.container {
  width: 600px;
  margin: auto;
  color: black;
  padding: 20px;
  text-align: center;
}
.container h1 {
  margin: 0;
  padding: 20px;
  font-size: 36px;
}
.container .btn {
  border: 0;
  padding: 15px;
  margin: 10px;
  width: 20%;
  font-size: 15px;
  outline: none;
  border-radius: 3px;
  color: #FFF;
  font-weight: bold;
}

.btn.blue-btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.btn.blue-btn:hover {
   background-color: #6FC6FF;
}

.btn.blue-btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.btn.blue-btn:hover {
   background-color: #6FC6FF;
}

.btn.green-btn {
  background-color: #2ecc71;
  box-shadow: 0px 5px 0px 0px #15B358;
}

.btn.green-btn:hover {
  background-color: #48E68B;
}

.btn.purple-btn {
  background-color: #9b59b6;
  box-shadow: 0px 5px 0px 0px #82409D;
}

.btn.purple-btn:hover {
  background-color: #B573D0;
}

1 Ответ

0 голосов
/ 09 июня 2019

Я понял это. Вот несколько важных вещей.

Кнопки были созданы как функции, а не как класс. 

  var ChallengeButton = function(props) {
    return (
      <button className={props.style} onClick={props.func}> Add {props.incCount} </button>
    )
  };

И переместил функцию increment в основной класс Эта функция имела слово «реквизит» в качестве аргумента. При ссылке на реквизиты для ChallengeButton я должен был использовать props.* и не мог использовать this.props.*; если бы у класса Challenge были реквизиты, я мог бы использовать this.props.* в классе Challenge.

Это рабочий скрипт. 

<script type="text/babel">

      var ChallengeButton = function(props) {
        return (
          <button className={props.style} onClick={props.func}> Add {props.incCount} </button>
        )
      };

      var Challenge = React.createClass({
        getInitialState: function() {
          return {
            count: 0
        }
      },
      increment: function(value) {
        this.setState({
           count: this.state.count + value
         })
      },
      render: function() {
        return (
          <div className="container">
            <h1>Count: {this.state.count}</h1>
            <ChallengeButton style="btn blue-btn" incCount='1' func={this.increment.bind(this, 1)} />
            <ChallengeButton style="btn green-btn" incCount='5' func={this.increment.bind(this, 5)} />
            <ChallengeButton style="btn purple-btn" incCount='10' func={this.increment.bind(this, 10)} />
          </div>
        )
     }
    });

    ReactDOM.render(
      <Challenge />,
      document.getElementById('app')
    );
    </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...