代码之家 › 专栏 › 技术社区 › minsu123

如何解析react中的单个引用?

hook frontend ecmascript-6 reactjs javascript

minsu123 · 技术社区 · 3 年前

水果的价值。

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

通过对水果上的信息运行map函数来创建一个按钮。

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

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

并设置useRef,以便在。单击“卡路里”按钮,也单击“水果含量”按钮。

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时,内容也被输出到控制台,苹果应该被输出,而芒果是输出。
如果你点击卡路里221的按钮,巴南应该被输出,但是芒果被输出到控制台。据说这是因为一个单一的参考。
如何解单参考函数?我不知道。

1 回复 | 直到 3 年前

Nick Parsons Felix Kling 3 年前

在我看来,你似乎可以删除ref,因为它目前的用途是在你点击第二个(卡路里)按钮时触发第一个(内容)按钮的点击事件。如果是这样的话,你可以打电话 onClickContent() 手动进入 onClickCalorie() .首先,你可以更新你的 onclick卡路里() 传递 onClickContent() 需要:

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

然后,在你的 onclick卡路里() ,更新参数,然后调用 onClickContent() 手动启动与单击内容按钮时触发的功能相同的功能:

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

这样,就不需要使用任何引用,因为不需要显式引用任何DOM元素。

如果你的 onclick卡路里() 函数的作用是调用/触发 onClickContent() ,然后可以移除 onclick卡路里() 函数和调用 onClickContent() 直接:

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

否则,如果你真的需要使用refs,你可以按照 this approach 您可以在其中为每个按钮创建参考:

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 ,您可以参考特定按钮,根据索引单击。你需要将索引传递到你的 onclick卡路里() 要访问它:

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