Как разместить функцию события в списке DOM в React.js - PullRequest
Новая
       0

Как разместить функцию события в списке DOM в React.js

0 голосов
/ 14 октября 2019

Я хотел бы спросить вас об использовании функции события в React.js.

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

Не могли бы вы дать мне советы по ее решению? 

const some = (props) = {
    // 'props' have two attributes, titles and contents
    // which each is a array of strings.



    function test(index){
        console.log('clicked');
        console.log(index);
     }

    const titlesList = props.titles.map((title, index) => {

        return <div className="eachTitle"
            key={index}
            onClick={test(index)}>
            {title} {index}
        </div>
    });

    return (
            <div>
                    {titlesList}
            </div>
    );
}

Спасибо за чтение.

Ответы [ 2 ]

1 голос
/ 14 октября 2019

Когда ваш компонент рендерится, он на самом деле вызовет test(index). Это устанавливает значение onClick на возвращаемое значение test(index). То, что вы хотите сделать, это установить onClick для функции, которая вызывает все, что вы хотите с правильными аргументами.

onClick={() => {test(index)}}

Это анонимная функция, которую можно передавать. При нажатии вызывается анонимная функция, которая на самом деле просто вызывает test(index) с вашими аргументами. Если вам не нужно было передавать какой-либо аргумент test, вы могли бы просто сделать:

onClick={test}.

Поскольку вы не можете указать onClick передавать аргументы (кромеобъект события), анонимная функция - простой способ обойти это.

0 голосов
/ 14 октября 2019

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

onClick={this.test(index)}

constructor(props){
super(props);
this.test = this.test.bind(this);
}


    function test(index){
        console.log('clicked');
        console.log(index);
     }

     const titlesList = props.titles.map((title, index) => {

        return <div className="eachTitle"
            key={index}
            onClick={this.test(index)}>
            {title} {index}
        </div>
    });
...