使用 React ref 获取 <p> 值答案

【问题标题】：Get <p> value using React ref使用 React ref 获取 <p> 值
【发布时间】：2022-01-07 06:06:30
【问题描述】：

在点击 li 项目并使用 ref 将其设置为 selectedBranch 状态后，是否有某种方法可以获取此“名称”值？

  const [selectedBranch, setSelectedBranch] = useState(null);
  const selectRef = useRef();

  const selectDeliveryBranch = () => {};

  return (
    <li
      onClick={selectDeliveryBranch}
    >
      <p ref={selectRef}>{props.name}</p>
    </li>

【问题讨论】：

selectRef.target.innerText 应该给你它，但它似乎毫无意义，因为无论如何你在props.name 中有它。

标签： javascript html reactjs react-native

【解决方案1】：

您不想使用 ref 来执行此操作，而只需创建一个回调：

return <li onClick={()=>setSelectedBranch(props.name)}>
    <p>props.name</p>
</li>

不需要参考

【讨论】：

谢谢！我不确定要使用什么，这绝对是更好更简单的方法

【解决方案2】：

您确定需要使用 ref 吗？为什么你不能这样做？

const [selectedBranch, setSelectedBranch] = useState(null);
const selectRef = useRef();

return (
    <li
        onClick={() => setSelectedBranch(props.name)}
    >
        <p ref={selectRef}>{props.name}</p>
    </li>

【讨论】：

谢谢！在此之后，我相信这会更好