freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-controlled-input.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036178	Створіть контрольоване введення	6	301385	create-a-controlled-input

--description--

Ваш застосунок може виконувати набагато складніші взаємодії між станом та відтвореним UI. Наприклад, елементи контролю форми для текстового введення, серед яких input та textarea, зберігають власний стан DOM як типи користувачів. За допомогою React ви можете перемістити цей змінний стан до стану компонента React. Введення користувача стає частиною стану застосунку, тому React контролює значення поля введення. Зазвичай, якщо ви маєте компоненти React із полями введення, в яких користувач може писати, це буде контрольованою формою введення.

--instructions--

Редактор коду має каркас компонента під назвою ControlledInput, щоб створити контрольований елемент input. Стан компонента вже ініціалізований властивістю input, яка містить порожній рядок. Це значення являє собою текст, який користувач вводить в поле input.

Спочатку створіть метод під назвою handleChange(), який має параметр під назвою event. Коли метод викликано, він отримує об’єкт event, який містить рядок тексту з елементу input. Доступ до цього рядка можна отримати завдяки event.target.value всередині методу. Оновіть властивість input стану компонента, використавши новий рядок.

У методі render створіть елемент input над тегом h4. Додайте атрибут value, який дорівнює властивості input стану компонента. Потім додайте властивість onChange зі значенням метода оброки подій handleChange().

Коли ви пишете у полі введення, то текст обробляється методом handleChange(), встановлюється як властивість input у локальному стані та відтворюється як значення в полі input на сторінці. Компонент state — єдине джерело істини вхідних даних.

Наостанок: не забудьте додати потрібні прив’язки в конструкторі.

--hints--

ControlledInput має повернути елемент div, який містить input та тег p.

assert(
  Enzyme.mount(React.createElement(ControlledInput))
    .find('div')
    .children()
    .find('input').length === 1 &&
    Enzyme.mount(React.createElement(ControlledInput))
      .find('div')
      .children()
      .find('p').length === 1
);

Стан ControlledInput має ініціалізуватися властивістю input зі значенням порожнього рядка.

assert.strictEqual(
  Enzyme.mount(React.createElement(ControlledInput)).state('input'),
  ''
);

Написання тексту в елементі введення має оновити стан та значення введення, а елемент p має відтворити цей стан згідно з написанням.

async () => {
  const waitForIt = (fn) =>
    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
  const mockedComponent = Enzyme.mount(React.createElement(ControlledInput));
  const _1 = () => {
    mockedComponent.setState({ input: '' });
    return waitForIt(() => mockedComponent.state('input'));
  };
  const _2 = () => {
    mockedComponent
      .find('input')
      .simulate('change', { target: { value: 'TestInput' } });
    return waitForIt(() => ({
      state: mockedComponent.state('input'),
      text: mockedComponent.find('p').text(),
      inputVal: mockedComponent.find('input').props().value
    }));
  };
  const before = await _1();
  const after = await _2();
  assert(
    before === '' &&
      after.state === 'TestInput' &&
      after.text === 'TestInput' &&
      after.inputVal === 'TestInput'
  );
};

--seed--

--after-user-code--

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

--seed-contents--

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // Change code below this line

    // Change code above this line
  }
  // Change code below this line

  // Change code above this line
  render() {
    return (
      <div>
        { /* Change code below this line */}

        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

--solutions--

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  render() {
    return (
      <div>
        <input
          value={this.state.input}
          onChange={this.handleChange} />
        <h4>Controlled Input:</h4>

        <p>{this.state.input}</p>
      </div>
    );
  }
};