Question

React的新功能，来自JS / jQuery。感觉我的基础知识不高，但是经过大量的搜索后，找不到以下问题的答案。因此，在jQuery中，我可以将同一事件处理程序绑定到多个子元素：

Options +FollowSymLinks -MultiViews
# Turn mod_rewrite on
RewriteEngine On
RewriteBase /

## hide .php extension
# To externally redirect /dir/foo.php to /dir/foo
RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC]
RewriteRule ^ %1 [R,L,NC]

## To internally redirect /dir/foo to /dir/foo.php
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^ %{REQUEST_URI}.php [L]

在React JSX中，我只想出了以下方法，这严重违反了DRY，并让我想起了我几年前编写的代码：

$("#someId p").on("click", someFunction);

总有一种更好的方法，是吗？

Answer 1

您可以将这些p标签放入列表中，并使用map函数来呈现它们。

let items=['foo','bar','baz'];

<div id="someId">
     {items.map((a,index)=>{
         return (
              <p key={index} onClick={(event)=>this.someFunction(event,index)}>{a}</p>
         );
      })}
</div>

React JSX：如何避免对多个元素使用多个onClick处理程序

1 个答案: