Как использовать onClick для запуска двух функций reactJs

93
8

Довольно новые, чтобы реагировать на меня, так что медведь со мной...

Я использую onClick в дочернем компоненте, чтобы изменить состояние родительского компонента. Родительское состояние - это логическое значение, которое, в свою очередь, используется для переключения класса на отдельный элемент из того, что было нажато. Что-то вроде этого:

В Parent.js (только соответствующий код):

constructor(props) {
super(props);

this.state = {
elementOpen: false;
}

this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState({
elementOpen: !this.state.bucketListOpen
})
}

render() {
return (
<Child
className = {this.state.elementOpen ? "open" : "closed"}
toggleClassName = {this.handleClick}
/>
)
}

В Child.js (только соответствующий код):

render() {
return (
<div>
<div className={this.props.className}>Test</div>
<a onClick={this.props.toggleClassName}>Click Me</a>
</div>
)
}

... и это прекрасно работает. Нет проблем. Проблема возникает, когда я хочу переместить {this.props.toggleClassName} в дочернем компоненте в функцию обработки (причина в том, что я могу запускать более одного события при щелчке). Короче говоря, он перестает работать.

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

handleClassSwitch() {
return this.props.toggleClassName;
}

render() {
return (
<div>
<div className={this.props.className}>Test</div>
<a onClick={this.handleClassSwitch}>Click Me</a>
</div>
)
}

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

спросил(а) 2018-07-05T21:20:00+03:00 1 год, 12 месяцев назад
1
Решение
54

Вы можете вызвать несколько функций внутри handleClassSwitch, но вам нужно вызвать эти методы, используя ().

Как это:

handleClassSwitch() {
this.props.toggleClassName(); // notice ()
function2();
function3();
}

Примечание. Не handleClassSwitch связывать метод handleClassSwitch внутри handleClassSwitch компонента, либо связывать внутри конструктора, либо использовать функцию стрелки.

Проверьте этот фрагмент на разницу между этими двумя:

function abc() {
console.log('calling abc');
return 1;
}

console.log('without () => ', abc);
console.log('with () => ', abc());

ответил(а) 2018-07-05T21:26:00+03:00 1 год, 12 месяцев назад
55

Кажется, вы больше не вызываете toggleClassName. При нажатии a тег, он вызывает handleClassSwitch, который возвращает ссылку на toggleClassName вместо того, чтобы вызывать его. Попробуйте написать это вместо этого:

handleClassSwitch = () => {
this.props.toggleClassName();
}

Обратите внимание, что я использую синтаксис => для привязки handleClassSwitch чтобы он имел доступ к this

ответил(а) 2018-07-05T21:27:00+03:00 1 год, 12 месяцев назад
55

В настоящее время вы не привязываете свою функцию handleClassSwitch же, как и к handleClick в своем Parent компоненте.

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

class Child {
handleClassSwitch = () => {
this.props.toggleClassName();
};

render() {
return (
<div>
<div className={this.props.className}>Test</div>
<a onClick={this.handleClassSwitch}>Click Me</a>
</div>
);
}
}

ответил(а) 2018-07-05T21:26:00+03:00 1 год, 12 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема