Операция привязки в React - PullRequest
Новая
       23

Операция привязки в React

0 голосов
/ 18 мая 2019

Метод handleClickExample работает так, как я хочу, когда я использую функцию React без параметров с функцией стрелки для результатов.Пример: 

class App extends Component {

 constructor(props) {
    super(props);
    console.log("constructor", this)
  }

   handleClickExample = () =>{
    console.log( "handleClickExample Method", this);
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClickExample}>TIKLA</button>
      </div>
    );
  }
}

Результат: Когда я нажимаю кнопку:

handleClick Method App {props: {…}, context: {…}, refs: {…}, updater: {…}, handleClickExample: ƒ, …}

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

Пример: 

class App extends Component {

 constructor(props) {
    super(props);
    console.log("constrcutor", this)
  }

   handleClickExample = (name) =>{
    console.log(name ,"handleClick Method", this);
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClickExample("DOES NOT WORK")}>TIKLA</button>
      </div>
    );
  }
}

Результат: Когда я нажимаю кнопку:

Метод не работает.Я могу решить эту проблему.Если я вызываю метод с использованием функции стрелки, проблема решается. 

<button onClick={ () => this.handleClickExample("DOES NOT WORK")} ></button>
Or
<button onClick={this.handleClickExample('DOES NOT WORK').bind(this)}>TIKLA</button>

В чем разница между параметризованной функцией и функцией без параметров?Почему я также должен был использовать функцию стрелки при использовании функции параметра.Или почему я должен был связать?Или почему мне не нужно делать это в функции без параметров?Он не говорит, что я не попал в метод и не нашел это.Я не могу вызвать метод. Когда я нажимаю кнопку, никакая функция не работает или выдает ошибку.

Или она также работает, когда вы это делаете. 

handleClickExample = (name) => (e) => {
     console.log(name ,"handleClick Method", this);
}

Почему у наспередать здесь параметр (e) ?

Ответы [ 2 ]

1 голос
/ 18 мая 2019

q - функция 

var q = this.handleClickExample // q()

q - возвращаемый результат функции 

var q = this.handleClickExample() // cannot call

q - функция 

var q = () => this.handleClickExample() // q()

q - функция, принимающая аргумент 

var q = (someArg) => this.handleClickExample() // q('1')

q - это функция, которая принимает аргумент и возвращает функцию 

var q = (someArg) => () => this.handleClickExample() // q('1')()

q - это функция, которая принимает аргумент и возвращает функцию, которая также принимает аргумент 

var q = (someArg) => (otherArg) => this.handleClickExample() // q('1')('two')

Ваш код: 

var q = handleClickExample = (name) => (e) => {} // q('myName')(e)
// q returns function that returns function
// name is your custom argument
// e is ClickEvent argument, that onClick is passing to callback

Событию onClick требуется функция, которая необязательно принимает аргумент события

1 голос
/ 18 мая 2019

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

handleClickExample = (name) => (e) => {
     console.log(name ,"handleClick Method", this);
}

Это называется карри.

...