React: Не можете вызвать функцию prop, когда она находится внутри другой функции?

Question

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

<button className="btn" onClick={this.props.route.auth.login.bind(this)}>test</button> 

, но если настроить кнопку для вызова функции я определяю выше функции делают так:

login() { 
    this.props.route.auth.login.bind(this); 
    } 

И изменения OnClick быть похожим на это:

onClick={this.login()} 

или

onClick={() => this.login()} 

Затем мода auth login никогда не открывается и я не получаю ошибки. Также я добавил console.log в login(), и я вижу его в консоли, но фактический модем для входа никогда не открывается? Он работает в первом примере, но не в других.

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

Answer 1

bind не вызывает вашу функцию:

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

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

Ваш код должен выглядеть следующим образом:

<button className="btn" onClick={() => this.login()}>test</button> <!-- You need to keep a reference to `this`, hence the binding --> 

Тогда:

login() { 
    this.props.route.auth.login(); 
} 

Я редактировал ответ так, что он использует функцию стрелки. Тем не менее, я предпочитаю не делать этого, поскольку он делает код немного громоздким, а скорее bind все функции в конструкторе, например, @ patrick-w-mcmahon.

Answer 2

Предположим, у вас есть контейнер MyContainer, и этот контейнер отображает представление MyView. В этом представлении есть кнопка, вызывающая метод. MyContainer собирается передать MyView метод, который ему нужно использовать.

MyContainer:

class MyContainer extends React.Component { 
constructor(props) { 
    super(props); 
    this.myFunc = this.myFunc.bind(this); 
} 

myFunc() { 
    console.log("hello world"); 
} 

render() { 
    return <MyView myClick={this.myFunc}/>; 
} 
} 

MyView:

const MyView = ({ myClick }) => { 
    return <button onClick={myClick} />; 
}; 

MyView.propTypes = { 
    myClick: PropTypes.func 
}; 

export default MyView; 

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