将整行保存到一个数组中

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,
        ...
    },
]

- Extelliqent

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];

您可以以与您已经展示的相同方式将其绑定到状态管理。
请参阅MDN关于delete运算符和Object.hasOwnProperty()的文章获取更多信息。

- Etheryte

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>

- Junius L

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

抱歉，如果我理解错了，请问那是你在寻找的吗？

- German

---

没错，只有一个小问题，rows是什么？我有所有的数据都在 this.props.Data 下，但这是整个数据... - Extelliqent

是的，rows就是你的数据；抱歉我忘了提到那是你的数据或者你状态所使用的变量。 - German