реагировать автоматическое связывание по щелчку автоматически для этого

Question

я нахожу противоречие в некоторых местах о реакции autobindig, пример:

первого звена делает ручной autobind React, Binding input values

class Post extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     post: this.props.data, 
     comment: '' 
    }; 
    } 

    render() { 
    return <div> 
     <input 
     type="text" 
     value={this.state.comment} 
     onChange={ this.handleChange.bind(this) } 
     placeholder="Write a comment..." /> 

     <button 
     className="button comments" 
     onClick={ this.handleClick.bind(this, this.state.post.id)}>Button</button> 
    </div> 
    } 

    handleClick(postId, e) { 
    console.log(postId); 
    console.log(this.state.comment); 
    } 

    handleChange(e) { 
    this.setState({ comment: e.target.value }); 
    } 
} 

второй ссылка сделать автоматический http://buildwithreact.com/tutorial/state

по последнему слову:

var CowClicker = React.createClass({ 
    getInitialState: function() { 
    return { 
     clicks: 0 
    }; 
    }, 

    onCowClick: function(evt) { 
    this.setState({ 
     clicks: this.state.clicks + 1 
    }); 
    }, 

    render: function() { 
    return (
     <div> 
     <div>Clicks: {this.state.clicks}</div> 
     <img 
      src="http://s3.bypaulshen.com/buildwithreact/cow.png" 
      onClick={this.onCowClick} 
      className="cow" 
     /> 
     <p>Click the cow</p> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <CowClicker />, 
    document.getElementById('container') 

ПРИМЕЧАНИЕ: AUTOBINDING Вы можете быть удивлены тем, что нам не нужно передавать обратный вызов, как this.onCowClick.bind (this). (Если нет, прочитайте это). Это связано с тем, что React autobinds методы экземпляра компонента по соображениям производительности. Подробнее здесь.»

Реагировать сделать автоматическое связывание? Если ответ„да“, иногда вам нужно связать вручную в некоторых случаях с OnClick ??

Answer 1

В React v0.13 классы ES6 вводится и нет автоматического связывания. Автоматическое связывание введено в React v0.4.

Если у вас есть старый проект с использованием React с версией, предшествующей версии v0.4, автоматическое связывание не выполняется.

Я тоже был смущен учебным материалом, и я создал post, чтобы поговорить об этом.

Answer 2

Как пояснил пользователь @havenchyk,

Использование React.createClass будет автоматически связывать эти значения правильно для нас, но изменений при использовании классов ES6 влияют на это. с классами ES6 это немного разные, свойство класса не автоматически связывается с экземпляром класса React.

Источник: https://toddmotto.com/react-create-class-versus-component/

• В первом примере они используют подход ES6. Во втором они используют традиционный

Answer 3

при использовании React.createClass реагируют на обязательные для вас обязательства.
Если вы используете синтаксис класса es6, больше не связывайтесь с вами.
это означает, что вы должны сделать вручную .bind(this).

но вы можете использовать жир функцию стрелок, которые не определяют их собственное this значения, вместо этого они привязаны к лексическим этой их текущего контекста.

проверить его http://codepen.io/dagman/pen/wzgvja

class Button extends React.Component { 
    handleClick =() => { 
     alert('Hello World'); 
    }; 
    render() { 
     return (
      <button onClick={this.handleClick}>button</button> 
     ); 
    } 
} 

ReactDOM.render(
    <Button />, 
    document.getElementById('mount-node') 
);