ReactJS:如何动态传递函数参数

Question

如何在ReactJS中动态调用带参数的函数

在从select下拉菜单中选择元素时，我将该值存储在状态变量

中

<Select
onChange={e => setMessage(e.value)}
options={options}
>

之后，我需要调用另一个函数这个参数我这样做了，但它不接受任何参数

<CallGetAMIDetails />

执行带参数

的函数的正确语法是什么?

function CallGetAMIDetails(message)

CallGetAMIDetails(message)/>

下面是完整的示例代码，调用这个函数function CallGetAMIDetails(message)

应该怎么做

import React , { useState }from 'react';
import {DashboardLayout} from '../components/Layout';
import Select from 'react-select'
const options = [
{ value: 'ami-abc*', label: 'ami-abc' },
{ value: 'ami-xyz*', label: 'ami-xyz' },
]
const DiscoverAMIPage = () => {
return (
<DashboardLayout>
<h2>Discovered AMI</h2>
<Select
onChange={e => setMessage(e.value)}
options={options}
/>
<CallGetAMIDetails />
</DashboardLayout>
)
}
function CallGetAMIDetails(message) {
console.log(this.message)
}
export default DiscoverAMIPage;

Answer 1

CallGetAMIDetails不是一个组件，它只是一个正常的功能。你可以像调用其他函数一样调用它。(就像你已经调用setMessage或console.log函数一样。)例如:

CallGetAMIDetails(someValue)

您是否试图在onChange处理程序中调用它?如果是这样，应该是这样的:

onChange={e => {
setMessage(e.value);
CallGetAMIDetails(someValue);
}}

基本上，你只需将更改处理程序的函数包装在花括号{}中，这样你就可以在其中添加另一行代码。

当然，someValue只是一个占位符，因为我不知道你想要传递什么给它。如果你手动创建函数参数，那么它可以是这样的:

CallGetAMIDetails({ message: 'some message' });

Answer 2

您可以尝试像这样在CallGetAMIDetails组件下传递您的消息状态

<CallGetAMIDetails callMessage={message} />

在组件中作为道具使用后:

CallGetAMIDetails = ({callMessage}) => {
// Do somethings
}

每次使用setMessage() useState函数更新状态时，您的消息状态也会更新，因此您的CallGetAMIDetails组件也会更新