【发布时间】：2020-12-27 16:05:42
【问题描述】：
我正在尝试通过 <LINK> 标记传递事件处理程序。我的最终目标是将事件处理程序传递给子组件：
<Post post={post} onClickClose={props.onClickClose} />
因为我使用的是路由器，所以我无法使用标准道具传递事件处理程序。我相信这个问题一定有解决方案，因为这似乎是一个相当正常的功能。
应用说明：
- 待办事项列表允许用户删除每个待办事项
- 待办事项列表允许用户导航到每个单独的帖子
- 每个单独的帖子都允许用户删除自己，使用与待办事项列表有权访问的相同方法引用
应用层次结构：
App
- Header
- - NotFound
- - ToDoList *
- - - Post **
- - Posts
- - - ToDoList *
- - - - ToDo **
** Ref: onClickClose -> removeTodo
* Method: removeTodo
这是我的代码的一个非常简短的版本：
设置：
<!DOCTYPE HTML>
<html>
<head>
<script src="assets/babel/bbh.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js" type="text/javascript"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js" type="text/javascript"></script>
<script src='https://unpkg.com/react-router-dom@4.3.1/umd/react-router-dom.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<script type="text/babel" name="react-example">
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import { welcome } from './bbh';
const Link = ReactRouterDOM.Link;
const NavLink = ReactRouterDOM.NavLink;
const Route = ReactRouterDOM.Route;
const Switch = ReactRouterDOM.Switch;
const Router = ReactRouterDOM.BrowserRouter;
const Redirect = ReactRouterDOM.Redirect;
// ToDo class component
class ToDo extends React.Component {
constructor(props) {
super(props);
}
render() {
const link = "/post/" + this.props.slug;
return (
<Link to={
{
pathname: link,
state: {
onClickClose: this.props.onClickClose
}
}
}>
My Link
</Link>
)
}
}
/*
Other class components:
App
Post
Posts
NotFound
ToDoList
*/
// Header class component
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: [
{
id: 1,
slug: "hello-react",
title: "Hello React",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
done: true,
createdAt: dateFns.format(new Date(), "YYYY-MM-DD HH:mm:ss")
},
{
id: 2,
slug: "hello-project",
title: "Hello Project",
content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
done: true,
createdAt: dateFns.format(new Date(), "YYYY-MM-DD HH:mm:ss")
},
{
id: 3,
slug: "hello-blog",
title: "Hello Blog",
content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
done: true,
createdAt: dateFns.format(new Date(), "YYYY-MM-DD HH:mm:ss")
},
]
};
}
render() {
return (
<Switch>
<Route exact path="/" render={() => <Posts posts={this.state.posts} />} />
<Route path="/post/:postSlug" render={(props) => {
console.log("props ",props);
const post = this.state.posts.find(
(post) => post.slug === props.match.params.postSlug
);
if (post) return
<Post post={post} onClickClose={props.onClickClose} />
// ERROR
else return
<NotFound />
}}
/>
<Route component={NotFound} />
</Switch>
)
}
}
render(<App />, document.getElementById('app'));
</script>
</div>
<script>
bbh.babelConfig = {
presets: ['es2015', 'react'],
plugins: ['transform-object-rest-spread'],
minified: true
}
</script>
</body>
</html>
当我运行代码时，我得到一个错误。
似乎我可以在 LINK -> to.state 中传递任何东西，除了事件处理程序？
我也尝试在 LINK 标记中创建标准道具，例如：
<Link onClickClose={this.props.onClickClose} to={link}>
My Link
</Link>
但是，onClickClose 属性 没有传递到路由器？
谁能提供在 LINK 标记中传递事件处理程序的解决方案？
环境：
- Windows 10
- 反应 17
- react-router-dom 4.3.1
注意事项：
我使用 react-router-dom 4.3.1 的原因是，这是唯一可以正常工作的 CDN 路由器版本。我正在使用 CDN 版本，因为我试图在 codepen.io
上显示它更新：
codepen.io
【问题讨论】：
-
使用上下文来实现它
标签： javascript reactjs react-router