时间戳

首页 > 解决方案 > 子用参数触发父函数

reactjs - 子用参数触发父函数

问题描述

我正在使用 React 钩子并尝试在事件onChange发生时将一些参数从子函数传递给父函数，但它显示错误answerHandler not a function。

父视图：

export default function Setting() {
    ...

    const answerHandler = (questionId, answerId) => {
        // some codes here
    }

    return (
        <div>
            <Question answerHandler={answerHandler} />
        </div>
    );
}

子视图：

export default function Question({ answerHandler }) {
    ...

    return (
        <div>
            <input
                type="checkbox"
                name="answer"
                onChange={answerHandler(1, 2)}
                value="1"
            /> &nbsp; Answer 1
        </div>
    );
}

编辑：

主要错误仅TypeError: answerHandler is not a function显示显示文件路径path-url-here/Question.js:68并指向错误行的内容onChange={answerHandler(1, 2)}

而且，如果没有要传递的参数，它也可以工作。

标签： reactjsreact-hooksparent-child

解决方案

当你有参数时，你不应该像这样在 child 中编写你的 answerHandler 函数。因为它是在渲染时调用的，并且可能会在每个渲染上导致错误或无限循环。试试这样：

子视图：

export default function Question({ answerHandler }) {
    ...

    return (
        <div>
            <input
                type="checkbox"
                name="answer"
                onChange={()=>answerHandler(1, 2)}
                value="1"
            /> &nbsp; Answer 1
        </div>
    );
}

推荐阅读