Функция связывания в компоненте реакции

Question

Я создал компонент в React, и я использую в нем какую-то функцию например.

class A { 
    changeDid(e) { 

    } 
    render() { 
    return (
     <input type="text" onChange{this.changeDid.bind(this)}> 
    ) 
    } 
} 

Я хочу, чтобы понять линию this.changeDid.bind (это) может кто-нибудь помочь мне в этом ??

Answer 1

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

this.changeDid.bind(this) означает, что в changeDidthis будет ссылаться на A, так что вы можете получить методы, связанные с A.

class A { 
    changeDid(e) { 
    this.someMethod(); 
    } 

    someMethod() { 
    // ... 
    } 

    render() { 
    return (
     <input type="text" onChange={this.changeDid.bind(this)}> 
    ) 
    } 
} 

но если вы передаете onChange={ this.changeDid }, this будет относиться к глобальной области видимости (в браузере это window или undefined, если вы используете strict mode), и предыдущий пример не будет работать, потому что someMethod существует в A, но не в window

Answer 2

Я создал простой пример для вас.

class Example extends React.Component { 
    constructor(){ 
    this.state = { 
     item : 'hello World' 
    } 
    /* this.click = this.click.bind(this) */ 
    } 
    click(){ 
    console.log(this) 
    console.log(this.state.item) 
    } 
    render(){ 
    return <div> 
     <button onClick={this.click}>Click Me</button> 
    </div> 
    } 
} 

React.render(<Example />, document.getElementById('container')); 

Так что, если вы нажмете на кнопку, вы получите следующий в console:

console.log(this) // undefined 
console.log(this.state.item) // Type Error, Cannot read property 'state' of undefined 

Это происходит потому, что внутри click метода this ссылки на undefined, но мы хотим показать нашу states.

Как вы можете это исправить? Чтобы убедиться, что мы получаем правильный контекст внутри метода click, мы bind(this). удалите комментарии из этой строки /* this.click = this.click.bind(this) */, и вы получите правильное поведение вашего метода.

Практический пример fiddle

Я надеюсь, что это поможет.

Спасибо.