Блог

Я хотел бы включить опцию onClick в свой span.

У меня есть следующий метод, который возвращает диапазон

 setCondition = () => {
    const condition = this.props.condition;
    if(condition) {
        return (
            <div className="hidden-xs">
                <span className="fa fa-thumbs-up fa-2x" style={{ backgroundColor: 'green' }} />
                <span className="fa fa-thumbs-down fa-2x" />
            </div>
        );
    } else {
        return (
            <div className="hidden-xs">
                <span className="fa fa-thumbs-up fa-2x" />
                <span className="fa fa-thumbs-down fa-2x" style={{ backgroundColor: 'red' }} />
            </div>
        );
    }
}
 

Я хотел бы добавить метод ниже, когда я нажимаю на один из span.

 const update = (cond) => {
   console.log(cond);
}
 

Я пытался сделать:

 <span onClick={this.update(true)} className="fa fa-thumbs-up fa-2x" style={{ backgroundColor: 'green' }} />
 

Но при щелчке ничего не происходит.

Не вызывайте функцию this.update(true) во время привязки. Привязать только функцию без вызова like this.update .

 <span onClick={this.update} className="fa fa-thumbs-up fa-2x" style={{ backgroundColor: 'green' }} />
 

Проверьте пример в документации React .

Или используйте функцию двойной стрелки, если вам нужно передать фиксированный параметр

 const update = (cond) => () => {
   console.log(cond);
}

<span onClick={this.update(true)} className="fa fa-thumbs-up fa-2x" style={{ backgroundColor: 'green' }} />
 

Или вы можете использовать анонимную функцию

 const update = (cond) => {
   console.log(cond);
}

<span onClick={this.update(true)} className="fa fa-thumbs-up fa-2x" style={{ backgroundColor: 'green' }} />
 

но, как говорится в документации:

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

Источник: reactjs.org

сделайте это

 <span onClick={() => this.update(true)} ... />
 

onClick получите функцию, и вы предоставите ей возвращаемое значение update

Вы могли бы передать анонимную функцию следующим образом:

 <span onClick={() => this.update(true)} .../>