如何在ReactJS中为onMouseDown函数输入额外的参数

Question

函数如下所示，用TypeScript:编写

const handleMouseDownHome = (e: any) => {
// Only works if the scroll mouse button is clicked
if (e.button === 1) {
window.open("/", "_blank", "noopener,noreferrer");
}
};
<div onMouseDown={handleMouseDown}>
...
</div>

上面使用的url是"/"，我想将url作为参数传递，这样函数就会是动态的。预期功能：

const handleMouseDownHome = (e: any, url: any) => {
// Only works if the scroll mouse button is clicked
if (e.button === 1) {
window.open(url, "_blank", "noopener,noreferrer");
}
};
<div onMouseDown={<What to Modify Here>}>
...
</div>

Answer 1

假设您的意思是，当设置处理程序时，您想要传递一个URL，那么您就可以使用该函数。要做到这一点，您需要创建一个接受参数的函数，并返回另一个使用该参数的函数。

function handleMouseDown(url) {
return function(e){
if (e.button === 1) {
window.open("/", "_blank", "noopener,noreferrer");
}
}
}

这里有一个正在工作的react示例，但它将url记录到控制台。

function App(){
const handleMouseDown = url => e => {
if (e.button === 1) console.log(url)
}
const url = 'www.google.com';

return <button onMouseDown={handleMouseDown(url)}>Middle Click Me</button>
}
ReactDOM.render( <App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

相反，如果您想要一个变量，该变量可以由其他函数设置，然后由处理程序使用，那么您不需要传递它，只需要函数可以访问它，就像在中一样，在其词法范围中。

由于假设变量在变化，我们应该使用一个状态：

const { useState } = React;
function App(){
const [url, setURL] = useState('');

const handleMouseDown = e => {
if (e.button === 1) console.log(url)
}

return (
<div>
<input onChange={(e)=> setURL(e.target.value)}></input>
<button className='click' onMouseDown={handleMouseDown}>Middle Click Me</button>
</div>
)
}
ReactDOM.render( <App/>, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>