javascript - React.js 函数组件的按钮 onClick 处理程序只工作一次

Question

我的pages/index.js：

import Flyout from '../components/flyout'
import { useState } from 'react'

export default function Home() {
  const [flyouts, setFlyouts] = useState(<></>)

  const [testFlyout, setTestFlyout] = useState('')
  function showTestFlyout() {

此语句仅有效一次。

    setFlyouts(<Flyout>{testFlyout}</Flyout>)

  }

  return (
    <>
      <input value={testFlyout} onChange={function (event) {
        setTestFlyout(event.target.value)
      }} />
      <button onClick={showTestFlyout}>popup</button>
      {flyouts}
    </>
  )
}

我的components/flyout.js：

import styles from './flyout.module.css'
import ReactDOM from 'react-dom'
import { useState } from 'react';

function Flyout({ title, children }) {
    const [flyoutClassName, setFlyoutClassName] = useState(styles.flyout)

    var closeFlyout = () => {

这也只有效一次：

        setFlyoutClassName(`${styles.flyout} ${styles.closedFlyout}`)

    }

    const [flyout, setFlyout] = useState(
        <div className={flyoutClassName}>
            <div>
                <p>{title}</p>
                <button onClick={closeFlyout}>&times;</button>
            </div>
            <div>{children}</div>
            <div></div>
        </div>
    )

    return (
        <>{flyout}</>
    );
}

function showFlyout(...) {
    ...
}

export default Flyout
export { showFlyout, Flyout }

这个网络应用程序基于 React.js，我正在尝试弹出包含输入值的不同弹出窗口，但该句柄仅在我第一次单击时有效，并且在我第一次单击后它不起作用点击。

那么为什么所有的setState()工作只做一次呢？

标签： javascriptreactjsnext.jsreact-dom