如何使用React ref获取p标签值，点击li后赋值给selectedBranch状态

是可以实现的，分两种场景给出对应代码：

单li场景（按要求的ref实现） #

只需要在点击回调中读取ref绑定DOM的textContent即可，注意要先判断ref是否存在避免空值报错：

import { useState, useRef } from 'react';

const [selectedBranch, setSelectedBranch] = useState(null);
// 给ref设置初始null，避免未挂载时访问报错
const selectRef = useRef(null);

const selectDeliveryBranch = () => {
  if (selectRef.current) {
    // 取出p标签文本后去除首尾空白字符
    const targetName = selectRef.current.textContent.trim();
    setSelectedBranch(targetName);
  }
};

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

多li循环渲染场景（更优方案，无需ref） #

如果是循环渲染的列表项，共用单个ref会导致ref永远指向最后一个渲染的p标签，此时更推荐直接在点击事件中传递name值，写法更简洁也不会出现引用错误：

import { useState } from 'react';

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

// 直接接收name作为入参
const selectDeliveryBranch = (name) => {
  setSelectedBranch(name);
};

return (
  // 示例为循环渲染列表的场景
  {props.branchList.map(item => (
    <li 
      key={item.id} 
      onClick={() => selectDeliveryBranch(item.name)}
    >
      <p>{item.name}</p>
    </li>
  ))}
);

注意事项 #

• ref仅在组件挂载完成后才会被赋值，所以取值前必须判断selectRef.current是否存在，避免出现空指针报错
• 非必要场景不推荐用ref读取DOM文本，直接操作状态/props传递参数的可维护性更高

内容的提问来源于stack exchange，提问作者Peloucvo