我如何解决反应中的单个引用？

Question

水果json值。

console.log(fruit)
[
    {
      content: "apple",
      information: [
        {
            calorie: "122"
        },
      ],
    },
    {
        content: "banana",
        information: [
          {
            calorie: "221"
          },
        ],
      },
    {
        content: "mango",
        information: [
          {
            calorie: "52"
          },
        ],
    },
];

通过运行水果信息的地图功能创建按钮

动态创建的按钮是{value.calorie}创建第一个按钮122第二个按钮221第三个按钮52。

并且内容还将函数映射到水果并将{fruit.content}作为按钮中的参数值。

并设置 useRef，以便在单击 value.calorie 按钮时，也单击水果内容按钮。

const Content = useRef(null);
const Calorie = useRef(null);


const onClickContent = (content) => {
  console.log(content);
};

const onClickCalorie = (calorie) => {
  Content.current.click();
  console.log(calorie);
};

return (
  <>

    fruit.map((Fields, index) => (
  <>
  <p>{Fields.content}</p>
  <button style={{"display": "none"}} ref={Content} onClick={() => onClickContent(Fields.content)}></button>
  </>

  {Fields.information.map((Value, key) => {
      return (
          <>
          <p>{Value.calorie}</p>
          <button onClick={() => onClickCalorie(Value.calorie)}>{Value.calorie}</button>
          </>
      )
  })}
  ))
  </>
)

问题是点击按钮上显示的122时，控制台也输出了内容，应该输出apple，却输出了mango。
如果点击卡路里为221的按钮，应该会输出banan，但是控制台会输出mango。据说这是因为单引用
如何解决单一参考功能？我不知道。

Answer 1

对我来说，您似乎可以删除 ref，因为它目前的用途是在您单击第二个（卡路里）按钮时触发第一个（内容）按钮上的单击事件。如果是这种情况，您可以改为在 onClickCalorie() 内手动调用 onClickContent()。首先，您可以更新 onClickCalorie() 以传递 onClickContent() 需要的数据：

<button onClick={() => onClickCalorie(Value.calorie, Fields.content)}>{Value.calorie}</button>

然后，在您的 onClickCalorie() 中更新参数，并手动调用 onClickContent() 以触发您在单击“内容”按钮时触发的相同功能：

const onClickCalorie = (calorie, content) => {
  onClickContent(content);
  // ... do stuff specific to clicking on the calorie button ...
  console.log(calorie);
};

这样，您不需要使用任何引用，因为您不需要明确引用任何 DOM 元素。

如果您的 onClickCalorie() 函数只做 call/trigger onClickContent()，那么您可以删除 onClickCalorie() 函数并直接调用 onClickContent()：

<button onClick={() => onClickContent(Fields.content)}>{Value.calorie}</button>

否则，如果您真的需要使用 refs，可以按照为每个按钮创建一个 ref：

const contentBtns = useRef([]);

然后在 useEffect() 中更新数组大小，如果 fruit 数组发生变化：

useEffect(() => {
  contentBtns.current = contentBtns.current.slice(0, fruit.length);
}, [fruit]);

然后填充存储在contentBtns.current中的数组，以便每个索引存储按钮元素：

<button 
  style={{"display": "none"}} 
  ref={el => contentBtns.current[index] = el} 
  onClick={() => onClickContent(Fields.content)}>
</button>

现在当你调用onClickCalorie时，你可以根据索引引用特定的按钮来点击。您需要将索引传递到 onClickCalorie() 才能访问它：

const onClickCalorie = (calorie, index) => {
  contentBtns.current[index].click();
  console.log(calorie);
};

我如何解决反应中的单个引用？

How can I resolve a single reference in react?

javascript

reactjs

ecmascript-6

react-hooks

frontend