將整行保存到數組實例中

Question

我是一名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,
        ...
    },
]

Answer 1

您可以存儲（以及稍后刪除）對整行的引用而不是布爾值以訪問每個字段。

// 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文章。

Answer 2

將每行的索引傳遞給收音機的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> 

Answer 3

您可以找到所選的特定行並將其保存在選定的數組中

例如：

//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  
    });
  }

對不起如果我理解錯了，但那是你在尋找什么？