在函数中创建的React HTML按钮没有注册click事件

Question

我有一个App.js在其渲染方法中调用函数DisplayQuestions。在什么地方声明handleClick()函数是正确的?我试图在DisplayQuestions中声明它，但似乎永远不会被调用。我看了这个类似的问题，但不能得到像这个问题一样的绑定工作，可能是因为DisplayQuestions组件是一个函数(不是App.js的一部分)。

按钮显示良好，但点击从未记录到控制台。我尝试使用事件属性和onclick属性创建按钮，结果相同:

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

DisplayQuestions:

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>
);
}

Answer 1

您没有正确地连接函数，并且您可能在那里放置了额外的代码，因为您在类组件中看到了它。但是你的组件是功能组件，而不是类组件。

下面是正确连接的方法:

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

注意这里使用的是onClick，而不是event，并且在一个箭头函数中封装了对handleClick(n.questions)的调用。

然后删除这个语句和上面的注释:this.handleClick = this.handleClick.bind(this);

Answer 2

你可以尝试像下面这样绑定

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