ReactJS:如何动态传递函数参数
ReactJS:如何动态传递函数参数
提问于 2021-08-16 11:28:04
如何在选择字段时在ReactJS中动态调用带参数的函数
从select下拉列表中选择元素时，我将该值存储在状态变量中
<Select
onChange={e => setMessage(e.value)}
options={options}
>在那之后，我需要调用另一个函数，这个参数和我这样做了，但它不需要任何参数
<CallGetAMIDetails />使用参数执行函数的正确语法是什么
function 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;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-16 11:33:15
CallGetAMIDetails不是一个组件，它只是一个普通的函数。您可以像调用任何其他函数一样调用它。(就像您已经调用setMessage或console.log函数的方式一样。)例如：
CallGetAMIDetails(someValue)您是否正在尝试在onChange处理程序中调用它？如果是这样的话，应该是这样的：
onChange={e => {
setMessage(e.value);
CallGetAMIDetails(someValue);
}}基本上，您只需将更改处理程序的函数封装在花括号{}中，这样就可以向其中添加另一行代码。
当然要注意的是，someValue在这里只是一个占位符，因为我不知道您实际想要传递给它的是什么。如果您手动创建函数参数，则可能如下所示：
CallGetAMIDetails({ message: 'some message' });Stack Overflow用户
发布于 2021-08-16 11:35:35
您可以尝试在CallGetAMIDetails组件下传递消息状态，如下所示
<CallGetAMIDetails callMessage={message} />在组件中将其用作道具后：
CallGetAMIDetails = ({callMessage}) => {
// Do somethings
}每次使用setMessage() useState函数更新状态时，消息状态都会更新，因此CallGetAMIDetails组件也会更新
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68802020
复制相关文章
相似问题
腾讯云开发者
