Question

您能帮我解决以下问题吗：我有一个React Hooks组件，我想在单击范围时切换箭头，它可以工作，但是只有一次，当我再次单击时它不再起作用，我不明白为什么？这是我的组件：

const ViewDetails = () => {
  const [ expanded, setIsExpanded ] = useState(false)

  const info = expanded ? 'Hide details' : 'View details';

  return (
  <div className={styles.viewDetails}>
    <span 
    className={ expanded ? styles.expanded : undefined }
    onClick={() => !setIsExpanded(true)}
    >
      <DownArrow />
    </span>
  <span className={styles.viewDetails}>{info}</span>
  </div>
  )};

Answer 1

您可以使用先前的状态值来切换expanded。在所有情况下，当前函数{() => !setIsExpanded(true)}将返回true。

解决方案。

const toggle = () => setIsExpanded((val) => !val);

return (
  <div className={styles.viewDetails}>
    <span 
    className={ expanded ? styles.expanded : undefined }
    onClick={toggle}
    >
      <DownArrow />
    </span>
  <span className={styles.viewDetails}>{info}</span>
  </div>
  )};

Codesandbox示例-codesandbox

Answer 2

在onClick范围内，尝试编写：

onClick={() => setIsExpanded(!expanded)}

切换箭头问题反应钩子

2 个答案: