我尝试将函数传递给子组件。当用户单击每个子组件时,将调用onclick函数。此onclick函数将写入父组件。
父组件:
class AgentsList extends React.Component {
constructor(props) {
super(props);
}
handleClick(e) {
e.preventDefault();
console.log(this.props);
}
render() {
const { agents } = this.props;
...
var agentsNodes = agents.map(function(agent, i) {
if(agent.id_intervention == "") {
return (
<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
);
}
});
return (
<div id="agents">
<div className="agents-title">
<h3>Title</h3>
</div>
{agentsNodes}
</div>
);
}
}
子组件:
class Agent extends React.Component {
constructor(props) {
super(props);
}
render() {
const { agent, t } = this.props;
return (
<Link to='/' onClick={this.props.onClick}>
...
</Link>
);
}
}
在这一行: <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
它说没有定义handleClick …如何解决这个问题?
感谢您的回答。
您需要将Agents绑定到AgentsList:这是您的代码的一个简单示例,我不得不删除一些东西,但是您明白了:
http://jsfiddle.net/vhuumox0/19/
var agentsNodes = agents.map(function(agent, i) {
if(agent.id_intervention == "") {
return (
<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
);
}
}, this); // here
作为React课程的一部分,我正在制作一个虚拟电子商店,并希望将产品从一个组件的状态传递到功能组件并在那里显示产品属性。如何将数据从状态传递到无状态组件? 我设置了一个组件ProductList,它存储产品(从api获取)和ProductDetail,它应该显示详细信息(通过id找到产品并显示它的描述、img等)。我设置了一个pp.js,它有两个路由-列表和详细信息。 pp.js: Product
我试图将类名传递给react组件以更改其样式,但似乎无法正常工作: 我试图通过传递具有各自风格的类的名称来改变药丸的风格。我是新来的,所以也许我做得不对。谢啦
我试图使用{children}将道具传递给子组件。 父亲组件: 子组件: 像这样使用它们: 我想把来自FatherComp的道具直接传递给ChildComp: 是否有可能实现我试图直接使用react功能组件而无需状态管理的目标? 谢谢
问题内容: 我正在尝试访问DetailsPage组件中的 ID ,但无法访问它。我试过了 将参数传递给DetailsPage,但徒劳。 所以有什么想法如何将ID传递给DetailsPage吗? 问题答案: 如果要将props传递到路线内的组件,最简单的方法是利用,如下所示: 您可以使用以下内容访问道具: 将需要通过原路线的道具,否则你将只能得到内。
问题内容: 我需要使用路由器将道具传递到组件。这是我的代码: 如您所见,isAuthenticated我想传递给Login组件的道具。 当我登录道具时, isAuthenticated 道具不存在。我做错了什么?如何正确通过道具?我关注了文档以及其他讨论。据我了解,它应该可以工作。的版本 做出反应路由器 和 反应路由器- DOM 是 4.0.0 问题答案: 像这样传递它: 它应该在“登录组件”中可
问题内容: 我想将功能传递给子组件,但出现此错误。 基本上是我想做的。 var ReactGridLayout = require(’react-grid-layout’); 似乎它是在React v16中引入的。因此,将函数从父代传递给子代的正确方法是什么? 问题答案: 我发现出了什么问题。这是因为react-grid-layout。我必须将其余的属性传递给孩子。