D3.js调度React事件

3htmauhk  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(149)

在我的axis中,我试图调度一个带有有效负载的React事件。当我使用console.log('item ')时,我得到了一个记录的指针事件。调度的有效负载为:isTrusted(从指标事件),而不是传送项目属性。这是使用D3.js触发传送事件的正确方式吗?

axisGroup
        .selectAll('.tick')
        .data<BaseItemI>(itemsInDomain)
        .style('cursor', 'pointer')
        .on('click', function (item) {
          console.log('clicked', item);
          // dispatch.arguments = { type: SET_SELECTED_ITEM, payload: item };
          dispatch({
            type: SET_SELECTED_ITEM,
            payload: { item: item, baseItem: undefined }
          });
        });

我试着使用来自D3的调度,但它很混乱。还试着使用回调函数而不是匿名函数,我得到了同样的行为。

.on('click', (item) => {
          console.log('clicked', item);
          dispatch({
            type: SET_SELECTED_ITEM,
            payload: { item: item, baseItem: undefined }
          });
        });
bjp0bcyl

bjp0bcyl1#

我没有设法让.on('click',()=〉{})起作用,而是向包含axisRef的g元素添加了一个onClick。

<g
      ref={ref}
      style={{ cursor: 'pointer' }}
      onClick={() => {
        itemsInDomain.map((i) => {
          dispatch({
            type: SET_SELECTED_ITEM,
            payload: { item: i, baseItem: undefined }
          });
        });
      }}
    ></g>

相关问题