时间戳

首页 > 解决方案 > 如何在 const Target = props => { 中添加函数

reactjs - 如何在 const Target = props => { 中添加函数

问题描述

如何添加功能以连接到我的组件之一 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;

标签： reactjs

解决方案

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

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

接着

<CreateVideoCard onChange={cardActionResponse} />

推荐阅读