- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个小组件,它列出了如下所示的数据结构。我想要做的是,当我点击 update
按钮时,我想增加 vote
键,但是,我没有找到正确的方法。我需要更新整个 data
状态吗?我对此没有什么困惑。
let MOCKDATA = [
{
id: 1,
name: 'Test 1',
vote: 0
},
{
id: 2,
name: 'Test 2',
vote: 2
}];
LinkListPage.js
import React from 'react';
// import LinksData from '../LinksData';
import Links from './Links';
// import update from 'react-addons-update';
//localStorage.setItem('linksData', JSON.stringify(LinksData));
let MOCKDATA = [
{
id: 1,
name: 'Test 1',
vote: 0
},
{
id: 2,
name: 'Test 2',
vote: 2
}];
class LinkListPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
data: MOCKDATA
};
this.update = this.update.bind(this);
}
componentDidMount() {
}
update() {
// this.setState({
// data:
// })
}
render() {
let list = this.state.data.map( links => {
return <Links key={links.id} update={this.update} data={links} />;
});
return (
<div>
<ul>{list}</ul>
{console.log(this.state.data)}
</div>
);
}
}
export default LinkListPage;
LinksPage.js
import React, {PropTypes} from 'react';
const Links = (props) => {
return (
<li>
<p>{props.data.name}</p>
<p>{props.data.vote}</p>
<button onClick={props.update}>Up</button>
</li>
);
};
Links.propTypes = {
data: PropTypes.object,
name: PropTypes.string,
vote: PropTypes.number,
update: PropTypes.func
};
export default Links;
HomePage.js
import React from 'react';
import LinkListPage from '../containers/LinkListPage';
const HomePage = () => {
return (
<div>
<LinkListPage />
</div>
);
};
export default HomePage;
阅读答案后,我的最终结果如下,效果很好。无论如何谢谢。
LinksPage.js
const Links = (props) => {
return (
<li>
<p>{props.data.name}</p>
<p>{props.data.vote}</p>
<button onClick={() => props.update(props.data.id)}>Up</button>
</li>
);
};
LinkListPage.js
update(id) {
const findId = LinksData.filter(item => {
item.id === id ? item.vote++ : false;
});
const data = Object.assign(...findId, LinksData);
this.state.data.sort((a, b) => {
return b.vote - a.vote;
});
//localStorage.setItem('linksData', JSON.stringify(this.state.data));
this.setState({data});
}
最佳答案
在这种情况下,我会将 onClick
处理程序添加到 LinksPage
组件。
class Links extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(e) {
// here you know which component is that, so you can call parent method
this.props.update(this.props.data.id);
}
render() {
return (
<li>
<p>{this.props.data.name}</p>
<p>{this.props.data.vote}</p>
<button onClick={this.onClick}>Up</button>
</li>
);
}
};
并更改您的更新
函数:
class LinkListPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
data: MOCKDATA
};
this.update = this.update.bind(this);
}
update(itemId) {
// TODO: find and update your item, you can do it since you have an 'id'
const data = [...];
this.setState({
data,
});
}
}
关于javascript - 单击时 react 更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37828867/
我查看了网站上的一些问题,但还没有完全弄清楚我做错了什么。我有一些这样的代码: var mongoose = require('mongoose'), db = mongoose.connect('m
基本上,根据 this bl.ocks,我试图在开始新序列之前让所有 block 都变为 0。我认为我需要的是以下顺序: 更新为0 退出到0 更新随机数 输入新号码 我尝试通过添加以下代码块来遵循上述
我试图通过使用随机数在循环中设置 JSlider 位置来模拟“赛马”的投注结果。我的问题是,当然,我无法在线程执行时更新 GUI,因此我的 JSlider 似乎没有在竞赛,它们从头到尾都在运行。我尝试
该功能非常简单: 变量:$table是正在更新的表$fields 是表中的字段,$values 从帖子生成并放入 $values 数组中而$where是表的索引字段的id值$indxfldnm 是索引
让我们想象一个环境:有一个数据库客户端和一个数据库服务器。数据库客户端可以是 Java 程序或其他程序等;数据库服务器可以是mysql、oracle等。 需求是在数据库服务器上的一个表中插入大量记录。
在我当前的应用程序中,我正在制作一个菜单结构,它可以递归地创建自己的子菜单。然而,由于这个原因,我发现很难也允许某种重新排序方法。大多数应用程序可能只是通过“排序”列进行排序,但是在这种情况下,尽管这
Provisioning Profile 有 key , key 链依赖于它。我想知道 key 什么时候会改变。 Key will change after renew Provisioning Pr
截至目前,我在\server\publications.js 中有我的 MongoDB“选择”,例如: Meteor.publish("jobLocations", function () { r
我读到 UI 应该始终在主线程上更新。但是,当谈到实现这些更新的首选方法时,我有点困惑。 我有各种函数可以执行一些条件检查,然后使用结果来确定如何更新 UI。我的问题是整个函数应该在主线程上运行吗?应
我在代理后面,我无法构建 Docker 镜像。 我试过 FROM ubuntu , FROM centos和 FROM alpine ,但是 apt-get update/yum update/apk
我构建了一个 Java 应用程序,它向外部授权客户端公开网络服务。 Web 服务使用带有证书身份验证的 WS-security。基本上我们充当自定义证书颁发机构 - 我们在我们的服务器上维护一个 ja
因此,我有时会在上传新版本时使用 app_offline.htm 使应用程序离线。 但是,当我上传较大的 dll 时,我收到黄色错误屏幕,指出无法加载 dll。 这似乎与我对 app_offline.
我刚刚下载了 VS Apache Cordova Tools Update 5,但遇到了 Node 和 NPM 的问题。我使用默认的空白 cordova 项目进行测试。 版本 如果我在 VS 项目中对
所以我有一个使用传单库实例化的 map 对象。 map 实例在单独的模板中创建并以这种方式路由:- var app = angular.module('myApp', ['ui', 'ngResour
我使用较早的 Java 6 u 3 获得的帧速率是新版本的两倍。很奇怪。谁能解释一下? 在 Core 2 Duo 1.83ghz 上,集成视频(仅使用一个内核)- 1500(较旧的 java)与 70
我正在使用 angular 1.2 ng-repeat 创建的 div 也包含 ng-click 点击时 ng-click 更新 $scope $scope 中的变化反射(reflect)在使用 $a
这些方法有什么区别 public final void moveCamera(CameraUpdate更新)和public final void animateCamera (CameraUpdate
我尝试了另一篇文章中某人评论中关于如何将树更改为列表的建议。但是,我在某处(或某物)有未声明的变量,所以我列表中的值是 [_G667, _G673, _G679],而不是 [5, 2, 6],这是正确
实现以下场景的最佳方法是什么? 我需要从java应用程序调用/查询包含数百万条记录的数据库表。然后,对于表中的每条记录,我的应用程序应该调用第三方 API 并获取状态字段作为响应。然后我的应用程序应该
只是在编写一些与 java 图形相关的代码,这是我今天的讲座中的非常简单的示例。不管怎样,互联网似乎说更新不会被系统触发器调用,例如调整框架大小等。在这个例子中,更新是由这样的触发器调用的(因此当我只
我是一名优秀的程序员,十分优秀!