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行，多行或全部行，则我会将这些行提示保存为状态。麻烦的是，我需要在行中保存某些值，如ste，clt，数量等。即：

[
    {
        ...
            "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];

您可以按照已经说明的方式将其绑定到状态管理。
有关更多信息，请参见the delete operator和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  
    });
  }

对不起，如果我理解错了，那是您要找的东西吗？

将整行保存到数组状态中

3 个答案: