reactjs - h如何在react中操作数据
问题描述
我正在尝试将自定义过滤器添加到我的 antd 表中,但我在使用数据时遇到了问题。
get valuations() {
var arr = this.props.valuation;
var valArray = [];
for (var i = 0; i < arr.length; i++) {
valArray.push({
date: arr[i].registered_date,
name: arr[i].full_name,
year: arr[i].year
});
}
return valArray;
}
render(){
const columns = [
{
title: "Date",
dataIndex: "date",
},
{
title: "Name",
dataIndex: "name",
},
{
title: "Year",
dataIndex: "year"
},
];
return(
<Table
columns={columns}
dataSource={this.valuations}
/>
)
}
所以我得到了表格上的数据,但我想添加一个自定义过滤器。所以我需要玩 valArray。我的问题是如何使用从函数估值返回的数组。我知道如何过滤数组,但我只是不知道如何在其函数之外使用数组。
我尝试使用数据设置新状态,但没有成功。
解决方案
你需要操纵this.valuations
. 创建输入框或其他元素以获取过滤器值:-
让我们在这里过滤您的名称属性:
现在
componentDidMount = () => {
this.valuations();
}
valuations = () => {
// set state instead of return here you can optimize your code using filter method here
this.setState({data: valArray})
}
nameFilterHandler = (inputValue) => {
const {valuation} = this.props;
//Edited Here.
valuation.filter((data) => {
data.name = data.full_name,
data.date = data.registered_date,
return date.full_name && data.full_name.match(this.state.inputValue)
})
this.setState({data: valuation});
}
return(
<Table
columns={columns}
dataSource={this.state.data}
/>
)
试试这个并考虑所有过滤器并为所有人创建一个通用方法。
推荐阅读
- python - 部署到heroku后无法登录
- android - 无法解析 settings_container
- reactjs - 使用 React 从 API 获取后未填充结果
- java - java.lang.ClassCastException:java.math.BigInteger 不能转换为 java.lang.long
- python - 混淆矩阵中的误报率
- python-3.x - 使用 python 中的特殊字符将 XML 转换为 csv
- python - 如何在 PyQT5 上更新 QLCDNumber 的值?
- python - 如何从两个字符串列表和一个条件中创建第三个列表?
- autodesk-forge - 是否有使用设计自动化 API 转换为 SVF 查看器的选项
- javascript - 以角度循环嵌套对象