我是新手，无法将参数传递给处理程序函数。我的测试代码如下：
import React from 'react';
import { useState, useEffect } from 'react';
import './App.css';
function Container(props) {
return <button onClick={props.clickHandler("A")}>Tap</button>;
}
function App() {
function clickHandler(char) {
console.log(char);
}
return <Container clickHandler={clickHandler} />
}
export default App;
当我点击按钮时，没有任何react，没有控制台日志。我在这里做错了什么？我之前尝试过不带参数的处理程序，它们工作正常。
将容器转换为这个
function Container(props) {
return <button onClick={() => props.clickHandler("A")}>Tap</button>;
}
您需要将函数传递给onClick但您调用了它，因此您传递的是未定义的clickHandler 的返回值
首先，您必须像这样将函数传递给 Container 组件：假设您的 Container 组件是这样的 div：
const Container = props => {
return(
<div onClick={props.clickHandler} > your container content here </div>
)
}
export default Container;
这应该有效:)
您可以在处理程序中使用嵌套箭头函数。
通过嵌套箭头函数，您可以在流程的任何步骤中添加额外的参数。
const handled = () => () => () => {}
尝试文本演示：
function Container(props) {
return <button onClick={props.clickHandler("AAA")}>Tap</button>;
}
function App() {
const clickHandler = value => char => e => {
console.log(value, char, e.target.innerText);
};
return <Container clickHandler={clickHandler(111)} />;
}
ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>