如何在 React.js 中将事件 function 分配给 DOM 列表

Question

I would like to ask you about using a event function in React.js.

I want to make test function, which would get index and print index when of titlesList is clicked. But this function doesn't work when is clicked.

Could you give me advices to solve it?

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>
    );
}

Thank you for reading.

Answer 1

When your component is rendered, it will actually call test(index) . This sets the value of onClick to the return value of test(index) . What you'll want to do is set onClick to a function that calls whatever you want with the proper arguments.

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

This is an anonymous function, which can be passed around. When clicked, the anonymous function is called, which really just calls test(index) with your arguments. If you didn't need to pass any argument to test , you could have just done:

onClick={test} .

Since you can't tell onClick to pass arguments (besides the event object), the anonymous function is an easy way to get around that.

Answer 2

The problem here is with the binding, there are two approach to resolve it, one mentioned by @Jtcruthers using anonymous function and another way is to create a constructor and register you method using .bind() while calling use this

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>
    });