1 Тема від Bygryn Востаннє редагувалося Bygryn (08.08.2016 14:36:37)

  • Bygryn
  • Bygryn
  • Користувач
  • Поза форумом
  • Дата реєстрації: 24.06.2013
  • Повідомлень: 71
    • Репутація: 22

Тема: React - Як в компоненті відобразити поле displayedName стану?

Вивчаю React. Вирішив створити додаток, який функціонує таким чином: В поле вводу вводиться текст. Знизу надпис, який відображає “Hello, <введений текст>!”. Текст повинен мінятися по мірі вводу. Якщо в поле нічого не введено, то повинно бути написано “Hello, stranger!”.
Виникло питання, Як в компоненті відобразити поле displayedName стану?
Ось код:

▼Прихований текст
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
</head>
<body>
    <header>
        <div class="container">
            <img class="rc-img" src="images/react.svg" alt="react logo">
            <h1>Hello World</h1>
        </div>
    </header>
    <div class="container" id="content"></div>

    <script type="text/babel">
    var NAME = 'Stranger';

    var HelloWorld = React.createClass({
        getInitialState: function() {
            return {
                displayedName: NAME
            };
        },

        handleNameChange: function(event) {
            var displayedName = event.target.value;
        this.setState({
         displayedName: displayedName
        });
        },
        render: function() {
            return (
                <div>
                    <input type="text" className="search-field" onChange={this.handleNameChange} />
                     <p>Hello, {}!</p>
                </div>
                );
        }
    });

    ReactDOM.render(
        <HelloWorld />,
        document.getElementById("content")
    );
    </script>
</body>
</html>

Дякую за увагу, можливо хтось теж вчить або вже знає React  :)

Подякували: 221VOLT1

2 Відповідь від sapientisat Востаннє редагувалося sapientisat (01.12.2016 18:16:41)

  • sapientisat
  • Користувач
  • Поза форумом
  • Дата реєстрації: 01.12.2016
  • Повідомлень: 24
    • Репутація: 29

Re: React - Як в компоненті відобразити поле displayedName стану?

Я б написав так:

<p>Hello, {this.state.displayedName === '' ? 'stranger' : this.state.displayedName}!</p>

не треба цього, imho:

var NAME = 'Stranger';

Просто треба отак:

getInitialState: function() {
            return {
                displayedName: ''
            };
        },

Лол, сорі за некропостинг, якщо що.

Подякували: Bygryn1

3 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 497
    • Репутація: 816

Re: React - Як в компоненті відобразити поле displayedName стану?

Я би зробив якось так https://codepen.io/karmeljuk/pen/vmrpdZ

    handleNameChange(event) {
      this.setState({
          displayedName: event.target.value || text
      })
    },

karmeljuk вебсайт