[英]Save whole row into an array instate
I am a JavaScript beginner and don't know how to search exactly what I am trying to accomplish... 我是一名JavaScript初学者,不知道如何准确搜索我想要完成的事情......
I have the below array, which I display on the page in a table format, row by row. 我有下面的数组,我以一种表格式逐页显示在页面上。
[
0: {
cuip: ".A0100",
quantity: 38,
...
}
1: {
cuip: ".A0102",
quantity: 1,
...
}
...
]
When user selects any item in the list, I mark the checkbox next to that row selected by the toggle below 当用户选择列表中的任何项目时,我会标记下面切换选择的该行旁边的复选框
toggleRow(cuip) {
const newSelected = Object.assign({}, this.state.selected);
newSelected[cuip] = !this.state.selected[cuip];
this.setState({
selected: newSelected,
selectAll: 2
});
}
What I end up in the state with the selected is 我最终选择的状态是什么
{.A0100: true, ...}
Which is great. 哪个好。 so if user selects 1, multiple or all rows, I have those rows cuips saved as true in the state. 因此,如果用户选择1,多个或所有行,我将那些行的cuips在状态中保存为true。 Trouble is, I need to save certain values in the row like ste, clt, quantity, etc .. ie: 麻烦的是,我需要保存行中的某些值,如ste,clt,quantity等。即:
[
{
...
"cuip": ".A0102",
"clt": "asvd",
"ste": "v31r",
"quantity": 3,
...
}, {
...
"clt": "vr13",
"ste": "vr31",
"quantity": 6,
...
},
]
You can store (and later remove) a reference to your whole row instead of a boolean value to have access to every field. 您可以存储(以及稍后删除)对整行的引用而不是布尔值以访问每个字段。
// 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];
You can bind this to your state management in the same way you've already demonstrated. 您可以使用与已经演示过的方式相同的方式将其绑定到州管理层。
See the MDN articles on the delete
operator and Object.hasOwnProperty()
for further info. 有关详细信息,请参阅有关delete
运算符和Object.hasOwnProperty()
的MDN文章。
Pass the index of each row to your onChange event of your radio, when the user clicks it get the index and save it to selected array. 将每行的索引传递给收音机的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 could find the specific row that you selected and save that in a selected array 您可以找到所选的特定行并将其保存在选定的数组中
For instance: 例如:
//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
});
}
Sorry If I understood wrong, but is that what you were looking for? 对不起如果我理解错了,但那是你在寻找什么?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.