, чтобы сохранить свой прогресс
Олег
16 янв. 2021 г., 19:12

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

Не получается пройти, запутался в синтаксисе:

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> ); } };
Мое решение :

class ControlledInput extends React.Component { constructor(props) { super(props); this.state = { input: '' }; // change code below this line this.onChange = this.onChange.bind(this); // change code above this line } // change code below this line onChange(event){ this.setState({ input: event.target.value, }); } // change code above this line render() { return ( <div> { /* change code below this line */} <input value={this.state.input || ""} onChange={this.onChange}/> { /* change code above this line */} <h4>Controlled Input:</h4> <p>{this.state.input}</p> </div> ); } };
П.С. Старайся тоже код вставлять в преттиер, а то читать сложно.
Что такое преттиер?
Ну, не совсем корректно я это слово выбрал. В редакторах это плагин, который приводит код в порядок по заданным правилам (отступы, переносы, кавычки и т.п.). Здесь имелось ввиду просто в редактор кода вставить, чтобы подсветка была.

Добавить комментарий