Javascript 在函数中创建的React HTML按钮未注册单击事件

我有一个App.js，它在render方法中调用函数

DisplayQuestions

。声明

handleClick（）

函数的正确位置是什么？我试图在DisplayQuestions中声明它，但似乎从未被调用。我查看了，但无法使绑定像这个问题一样工作，可能是因为DisplayQuestions组件是一个函数（不是App.js的一部分）

该按钮显示良好，但不会将单击记录到控制台。我尝试使用event属性和onclick属性创建按钮，结果相同：

class App extends React.Component {
  render() {
    return (
      <div className="App"></div>
          <DisplayQuestions />
    )
  }

类应用程序扩展了React.Component{
render（）{
返回(
)
}

显示问题：

export function DisplayQuestions() {
    const [notes, setNotes] = useState([{ questions: [], definition: "" }]);
    const [query, setNotesQuery] = useState("Dynamo");
    const [isLoading, setIsLoading] = useState(true);

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
    //handleClick function
    var handleClick = (q) => {
        console.log(`handleClick`, q)
    }

    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            setNotes(await NotesApiQuery(query))
            setIsLoading(false);
        };
        fetchData();
    }, [query]);

    return (
        <div>
            {isLoading ? (
                <div> Loading ...</div>
            ) :
                <div>
                    <h3>Notes({notes.length}):</h3>
                    {
                        notes.map((n) => (
                            <div>
                                <li>
                                    <span style={{ visibility: 'hidden' }} id={n.questions}>{n.definition}</span>
                                    <button event={handleClick(n.questions)}>Show/Hide ans</button>
                                </li>
                            </div>
                        )
                        )
                    }
                </div>
            }
        </div>
    );
}

导出函数DisplayQuestions（）{
const[notes，setNotes]=useState（[{问题：[]，定义：“}]）；
const[query，setNotesQuery]=useState（“Dynamo”）；
const[isLoading，setIsLoading]=useState（true）；
//此绑定是使`This`在回调中工作所必需的
this.handleClick=this.handleClick.bind（this）；
//handleClick函数
var handleClick=（q）=>{
log（`handleClick`，q）
}
useffect（（）=>{
const fetchData=async（）=>{
设置加载（真）；
setNotes（等待NotesApiQuery（查询））
设置加载（假）；
};
fetchData（）；
}，[查询]；
返回(
{孤岛加载(
加载。。。
) :
注释（{Notes.length}）：
{
注：地图（（n）=>(

{n.definition}
显示/隐藏ans

)
)
}
}
);
}

您没有正确连接函数，并且您可能在类组件中看到了额外的代码，因此您可能会将其放在那里。但是您的代码是一个功能组件，而不是类组件

以下是如何正确连接它：

<button onClick={() => handleClick(n.questions)}>Show/Hide ans</button>

handleClick（n.questions）}>显示/隐藏ans

请注意，使用

onClick

，而不是

event

，并将对

handleClick（n.questions）

的调用封装在箭头函数中

---

然后删除此语句及其上面的注释：

this.handleClick=this.handleClick.bind（this）
您可以尝试如下绑定

<button onclick={()=>handleClick(n.questions)}>Show/Hide ans</button>

handleClick（n.questions）}>显示/隐藏ans
那
应用程序
代码无法编译。JSX不允许多个顶级元素。“这个绑定是使
这个
在回调中工作所必需的”，这是针对类组件，而不是使用钩子的功能组件。当我点击google:react按钮时，第一个点击是，它在折叠上方有一个简短的示例<代码>激活激光器

按钮

没有

事件

属性。用户还需要将其更改为

onClick

（如我的回答所示）。