如何在 const Target = props => { 中添加函数答案

【问题标题】：How to add a function in const Target = props => {如何在 const Target = props => { 中添加函数
【发布时间】：2020-05-29 08:01:20
【问题描述】：

如何添加一个函数来连接到我的组件之一 onChange？创建这样的函数会返回错误代码“cardActionResponse”未定义。

使用这样的 const 类有什么好处？

const Target = props => {

    const { markAsDone } = useContext(ItemContext);

    const [{ isOver }, drop] = useDrop({
        accept: 'Item',
        drop: (item, monitor) => console.log(item),
        collect: monitor => ({
            isOver: !!monitor.isOver()
        })
    })

    //Cannot do this. How else can I make a function to connect to CreateVideoCard?
    cardActionResponse = (event) => {
        console.log(event);
    }



    return (
        <div className="target top80 right30" ref={drop} style={{ backgroundColor: isOver ? 'black' : '' }} >
            <TitleDescription class="z1"/>
            <div class="right10 left10">
                <CreateVideoCard onChange={this.cardActionResponse} />
                <CreateDescriptionCard></CreateDescriptionCard>
                <CreateAudioCard></CreateAudioCard>
                <CreateTermsCard></CreateTermsCard>
            </div>
        </div>
    );
};

export default Target;

【问题讨论】：

你缺少一个常量：const cardActionResponse =。箭头函数中也没有 this。
@jonrsharpe 不想太挑剔，只是想指出“this”关键字在箭头函数中可用，它只是指向父上下文。
@Nicolas 更准确，是的；谢谢！

标签： reactjs

【解决方案1】：

功能组件没有自己的上下文 (this)，因此您应该简单地使用 const 变量。请使用

const cardActionResponse = (event) => {
        console.log(event);
    }

然后

<CreateVideoCard onChange={cardActionResponse} />

【讨论】：