javascript - 如何在 React.js 中将事件函数分配给 DOM 列表

Question

我想询问您有关在 React.js 中使用事件函数的问题。

我想制作测试函数，当单击titlesList时它将获取索引并打印索引。 但点击后该功能不起作用。

你能给我解决这个问题的建议吗？

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

感谢您的阅读。

Answer 1

当你的组件被渲染时，它实际上会调用test(index)。这会将 onClick 的值设置为 test(index) 的返回值。您需要做的是将 onClick 设置为一个函数，该函数可以使用正确的参数调用您想要的任何内容。

onClick={() => {测试(索引)}}

这是一个匿名函数，可以传递。单击时，将调用匿名函数，该函数实际上只是使用您的参数调用 test(index) 。如果您不需要向 test 传递任何参数，您可以这样做:

onClick={测试}。

由于您无法告诉 onClick 传递参数(除了事件对象之外)，因此匿名函数是解决该问题的简单方法。