![](/img/trans.png)
[英]Trying to save changes as a whole as array inside an array that contains a custom object
[英]Save whole row into an array instate
我是一名JavaScript初学者,不知道如何准确搜索我想要完成的事情......
我有下面的数组,我以一种表格式逐页显示在页面上。
[
0: {
cuip: ".A0100",
quantity: 38,
...
}
1: {
cuip: ".A0102",
quantity: 1,
...
}
...
]
当用户选择列表中的任何项目时,我会标记下面切换选择的该行旁边的复选框
toggleRow(cuip) {
const newSelected = Object.assign({}, this.state.selected);
newSelected[cuip] = !this.state.selected[cuip];
this.setState({
selected: newSelected,
selectAll: 2
});
}
我最终选择的状态是什么
{.A0100: true, ...}
哪个好。 因此,如果用户选择1,多个或所有行,我将那些行的cuips在状态中保存为true。 麻烦的是,我需要保存行中的某些值,如ste,clt,quantity等。即:
[
{
...
"cuip": ".A0102",
"clt": "asvd",
"ste": "v31r",
"quantity": 3,
...
}, {
...
"clt": "vr13",
"ste": "vr31",
"quantity": 6,
...
},
]
您可以存储(以及稍后删除)对整行的引用而不是布尔值以访问每个字段。
// Sample storage and a sample row
const selected = {};
const row = { cuip: '.A0100', quantity: 38 };
// Add a row
selected[row.cuip] = row;
// Check if a row is selected
const isRowSelected = selected.hasOwnProperty(row.cuip);
// Remove a row
delete selected[row.cuip];
您可以使用与已经演示过的方式相同的方式将其绑定到州管理层。
有关详细信息,请参阅有关delete
运算符和Object.hasOwnProperty()
的MDN文章。
将每行的索引传递给收音机的onChange事件,当用户单击它时获取索引并将其保存到选定的数组。
onChange = (e) => {
// uses row index and get the selected item from the array
const selected = this.state.data[e.target.dataset.index];
const selectedState = this.state.selected;
this.setState({
selected: [...selectedState, selected] // add the selected item to the selected array
})
}
table, th, td { border: 1px solid black; border-collapse: collapse; } table { width: 100% }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> <div id="root"></div> <script type="text/babel"> class App extends React.Component { state = { data: [ { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' }, { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' }, { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' }, { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' } ], selected: [], show: false, }; onChange = (e) => { const selected = this.state.data[e.target.dataset.index]; const selectedState = this.state.selected; this.setState({ selected: [...selectedState, selected] }) } show = () => { this.setState({ show: true }) } render() { const tr = this.state.data.map((item, index) => <tr key="index"><td>{item.cuip}</td><td>{item.clt}</td><td>{item.ste}</td><td>{item.quantity}</td><td><input onChange={this.onChange} data-index={index} type="radio" /></td></tr>); return ( <div> <table> <thead> <tr> <th>cuip</th> <th>clt</th> <th>ste</th> <th>quantity</th> </tr> </thead> <tbody>{tr}</tbody> </table> <br/> <button onClick={this.show}>show selected</button> { this.state.show && <p>{JSON.stringify(this.state.selected)}</p> } </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); </script>
您可以找到所选的特定行并将其保存在选定的数组中
例如:
//you can have a state of selected rows
state = {
selectedRows: []
}
toggleRow(cuip) {
const newSelected = Object.assign({}, this.state.selected);
newSelected[cuip] = !this.state.selected[cuip];
..
const {selectedRows, /* this is where your data is stored -> */ rows} = this.state;
const findSelected = rows.find(row => row.cuip === cuip);
const selected = [...selectedRows, findSelected]
this.setState({
selected: newSelected,
selectAll: 2,
selectedRows: selected
});
}
对不起如果我理解错了,但那是你在寻找什么?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.