Блог

#javascript #reactjs #input

#javascript #reactjs #ввод

Вопрос:

 class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // binding in the constructor
      this.handleChange = this.handleChange.bind(this)
 
  }
  // what the function does
   handleChange(event){
    this.setState({
      input: event.target.value
    })
   }

  render() {
    return (
      <div>
        <input value = {this.state.input} 
        
        {//binding within the component}
       <input onChange = {this.handleChange.bind(this)}>
       </input>
       {//why}        
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};
  

Комментарии:

1. .bind(this) В JSX нет необходимости. Он уже был привязан к this конструктору, нет необходимости делать это снова. Причина, по которой это вообще делается, заключается в том, что в противном this случае не будет ссылаться на экземпляр класса. Другое распространенное решение — сделать его функцией со стрелкой. Есть несколько других хороших ответов, которые подробно объясняют.

2. Где вы этому учитесь? Похоже на устаревший учебник

3. ^ Тоже хороший момент. С помощью ES6 привязка в React теперь редко требуется. Плюс с помощью хуков функциональные компоненты в основном заменили основанные на классах.

4. Привязка (this) в javascript происходит потому, что вы передаете текущий экземпляр вашего компонента, который вы используете, в методе. Если вы не добавите привязку, это будет ссылка на html-элемент ( здесь ввод ). Так что из-за этого вы не можете получить доступ к своему состоянию. Привязка обязательна в компоненте класса