<section id="description">
<p>У вашего приложения может быть более сложное взаимодействие между <code>state</code> и отображаемым пользовательским интерфейсом. Например, элементы управления формой для ввода текста, такие как <code>input</code> и <code>textarea</code>  сохраняют свое собственное состояние в DOM по типу пользователя. С React, вы можете переместить это изменяемое состояние в компонент. Ввод пользователя становится частью приложения <code>state</code>, так что React контролирует значение этого поля ввода. Как правило, если у вас есть компоненты React с полями ввода, которые пользователь может ввести, это будет управляемая форма ввода.</p></section>

Create a Controlled Input

front-end-libraries

React

Не получается пройти, запутался в синтаксисе: class ControlledInput extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 input: ''
    };
 // Change code below this line
 handleChange(event) {
 this.setState({
 input: event.target.value
    });
}
 // Change code above this line
  }
 // Change code below this line
  <input onChange = {this.handleChange.bind(this)}/>
 // Change code above this line
 render() {
 return (
      <div>
        { /* Change code below this line */}
        <input value = {this.state.input}/>
        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Обсуждение задания "Create a Controlled Input"

Controlled Input: