小编dev*_*rav的帖子

我正在尝试管理带有反应的复选框。以下代码运行良好，但是我想重构render方法中的代码，以便它使用Component。我想将ref传递给该组件，但是我不知道该怎么做。

export default class AreRefsAwesomeCheckbox extends Component {
    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange() {
        let data = {
            isFeatured: this.refs.check_me.checked
        };
        postJSON('/some/url', data);
    }


    componentDidMount() {
        const data = getJSON('/some/url');
        data.then(object => {
                this.refs.check_me.checked = object.will_i_have_a_nice_checkbox;
            }
        )
    }

    render() {
        return (
            <div>
                <label>
                    <input ref="check_me" type="checkbox" 
                           onChange={this.handleInputChange}/>
                    <div>Are refs good?</div>
                </label>

            </div>
        );
    }
}

我在想像这样的事情

const Checkbox = ({myRef, changeInput, checkboxText}) => {
    return (
        <label>
            <input type="checkbox" ref={myRef} onChange={(event) => changeInput(event)}/>
            <div> {checkboxText} …

在 Next JS < 13 中，我们router.events可以_app.js添加类似的效果

import { useRouter } from 'next/router'
import NProgress from 'nprogress'

const Main = ({ Component, pageProps }) => {
    const router = useRouter()

    useEffect(function nprogressOnRouteChange() {
        router.events.on('routeChangeStart', NProgress.start)
        router.events.on('routeChangeError', NProgress.done)
        router.events.on('routeChangeComplete', NProgress.done)

        return () => {
            router.events.off('routeChangeStart', NProgress.start)
            router.events.off('routeChangeError', NProgress.done)
            router.events.off('routeChangeComplete', NProgress.done)

            NProgress.remove()
        }
    }, [])

    ...
}

但现在useRouter已移至next/navigation，并且钩子返回的对象中不再具有任何事件属性，我是否遗漏了什么？

尝试在新文件中导入Router，但事件也不起作用next/routerlayout.tsx

import Router from 'next/router'
export default function Transition({ children }) …