繁体   English   中英

Useref、usestate、useEffect 问题

Useref, usestate, useeffect issues

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试创建一个 function 选择一个 HTML 元素并使用 ref 将其中的值更改为另一个元素中的值,state 和效果挂钩

const Service = () => {
const [selected, setSelected] = 
 useState(false);
let change = useRef(null);
const[title, setTitle] = useState("");
useEffect(() => {
setTitle(change.current.children(0))
})
const Changer = (e)=>{
e.preventDefault()
const style = e.target;
if(selected === false){
  
  console.log(`you clicked ${style}`);
}
setSelected( current => !current);
// let style={background: selected ? 
'#6EEFB1' : ''};
// if (selected === true){
//   setSelected(false)
//   // let style= {styleObject.li}
  
// }else{
//   setSelected(true)
// }
}
return(
 <section className={selected ? 
 "serviceClicked" : "services"}>
  <h1>Our Services</h1>
  <div className='service-content'>
    <div className='service-text' ref=. 
    {change}>
    <h2></h2>
    <p>
      Syse infrans att dedade. Redar 
      fäsat. Älogi hypol. Antere 
       nydavarat och hemil. 
      Dist kyning. Kroska 
      bröllopskoordinator. Teletotal. 
      Mor tin. 
    </p>
    <p>
      Spejörar befaladat. Lavis 
      kvasideledes. 
      Dande dak. Anteck ur dick. 
      Skurkstat larad henifiera. Belogi 
      koliga selig. 
    </p>
    </div>
    <div className='service-list'>
      <ul id='top-list'>
        <li onClick={Changer}>
          <img src={oby} />
          {/* <div></div> */}
          <p>ob/gyn</p>
        </li>
        <li  onClick={Changer}>
          <img src={neuro} />
          {/* <div></div> */}
          <p>neurology</p>
        </li>
        <li  onClick={Changer}>
          <img src={peds}  />
          {/* <div></div> */}
          <p>pediatrics</p>
        </li>
      </ul>
      <ul id='bottom-list'>
        <li  onClick={Changer}>
          <img src={dental}/>
          {/* <div></div> */}
          <p>dental care</p>
        </li>
        <li  onClick={Changer}>
          <img src={cardio} />
          {/* <div></div> */}
          <p>cardiology</p>
        </li>
        <li  onClick={Changer}>
          <img src={ent} alt='E.N.T' />
          {/* <div></div> */}
          <p>ent</p>
        </li>
      </ul>
    </div>
  </div>
</section>

) };

h2标记旨在在单击时采用 li 元素下p标记的值,我已经弄清楚了如何在单击li元素时显示服务文本中的内容。

令人不安的是如何将h2标签的值更改为单击li元素的p标签的任何值。

1 个回复

CodeSandBox 示例

您可以简单地使用您的useState来完成所有这些操作,而不是使用useEffectuseRef

我创建了一个常量来让我/你的生活更轻松,并且只是 map 虽然元素(你不需要这个,但我会推荐它)

const IMAGES = [
  { src: "oby", name: "ob/gyn" },
  { src: "neuro", name: "neurology" },
  { src: "peds", name: "pediatrics" },
  { src: "dental", name: "dental care" },
  { src: "cardio", name: "cardiology" },
  { src: "ent", name: "ent" }
];
<section className={title ? "serviceClicked" : "services"}>
      <h2>{title}</h2>
      ...
      <ul id="top-list">
            {IMAGES.map(({ src, name }) => {
              return (
                <li
                  key={name}
                  onClick={() => {
                    setTitle(name);
                  }}
                >
                  <img src={src} />
                  <h3>{name}</h3>
                </li>
              );
            })}
       </ul>
       ...
</section>

如果需要直接与元素交互,你真的会想使用useRef ,否则当只处理数据时, useState/useEffect就绰绰有余了。

1 使用 useEffect 解决 useState 异步问题

我知道 useState 异步工作,我想有条件地渲染我的部分代码。 这是条件部分: 这是带有 useState 的数据库进程 如果我将这两个代码与下面的提交处理程序一起使用。 在第一次渲染中, vEmailServer不会改变。 我发现我必须使用 useEffect Hooks 来渲染代码的特定部分 ...

4 useState、UseRef 或 useMemo,我应该更喜欢哪个

我有一个场景,我需要在整个组件生命周期中存储 function 的 output(这个值永远不会改变)。 考虑下面的例子 上面提到的 4 种方法中哪一种是理想的? 我的理解: useState应该用于存储值的变化应该触发重新渲染的值。 如果我想记住计算,应该使用useMemo ,并且 memoiz ...

8 用 useEffect 钩住 useState

我遇到了这种行为。 两个 onChange 被依次调用。 其中之一将数据保存到状态,并使用先前的状态生成新的状态。 另一个只是向控制台打印一些东西。 单击按钮后调用 onChange 和 onChange2 useEffect - 将数据保存到状态 所以,如果你不使用 useEff ...

9 没有 useEffect 的“同步”useState

我有一个检测到的蓝牙设备列表deviceList ,它是用useState设置的: 我有一个启动设备扫描的按钮。 每次扫描开始时,我都需要将设备列表重置为[] 。 我愿意: 问题是setDeviceList不是同步的,并且在应该添加新设备时deviceList没有重置。 这可能会导致重复的设备。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM