如何将基于索引的数据移动到不同的表中

Question

获取表格的代码取决于在下图中左侧窗口中选择了多少项，但不知道需要在按钮的onClick函数中写入什么，才能将第一个选择的项移动到第一个表GMV1，将第二个选择的项移动到GMV2，依此类推。

我想要做的是首先检查contractLineItemSelectionChecked的状态。如果状态为true，则检查所选项目是否具有不同的合同id，并将不同的合同id对象推送到不同的位置。

[
  {
    cNo: "CDH0000403",
    contractLineItemSelectionChecked: true,
    companyCode: "1360",
    profitCenter: "DHA1",
    approverId: "C7937"
  },
  {
    cNo: "CDH0000404",
    contractLineItemSelectionChecked: false,
    companyCode: "1360",
    profitCenter: "DHA1",
    approverId: "C7937"
  },
  {
    cNo: "CDH0000405",
    contractLineItemSelectionChecked: true,
    companyCode: "1360",
    profitCenter: "DHA1",
    approverId: "C7937"
  }
];

<Field
  name="transactionSelected"
  component="select"
  className="custom-select my-1 mr-sm-2"
  id="moveContractLineItems"
  onChange={e => {
    setFieldValue("transactionSelected", "GMV+ /contract");
    document.getElementById("creategoodsMovementsContractsTransaction").click();
    getIndex();
  }}
>
  <option key="select" value="">
    Select
  </option>
  <option key="GMV+ /contract" value="GMV+ /contract">
    GMV+ /contract
  </option>
  <option key="PMT+/contract" value="PMT+/contract">
    PMT+/Contract
  </option>
</Field>;

<FieldArray name={`transactions["goodsMovements"].transactionItems`}>
  {({ push }) => (
    <input
      type="button"
      hidden
      id="creategoodsMovementsContractsTransaction"
      onClick={() => {
        let myCounter = 0;
        checkedCheckboxes.forEach(v =>
          v.contractLineItemSelectionChecked ? myCounter++ : v
        );
        for (var i = 0; i < myCounter; i++) {
          push({
            name:
              "GMV" +
              (typeof values.transactions.goodsMovements.transactionItems !==
                "undefined" &&
                values.transactions.goodsMovements.transactionItems.length + 1),
            transactionId: "",
            transactionType: "1",
            requestedPostingDate: null,
            companyCode: "",
            profitCenter: "",
            attachments: [],
            comments: "",
            transactionLineItems: []
          });
        }
      }}
    />
  )}
</FieldArray>;

<button
  type="button"
  className="btn btn-primary my-1"
  onClick={() => moveItems()}
>
  Move
</button>;

​

​

Answer 1

也许下面的内容会让你知道如何做到这一点：

​

const Item = React.memo(
  //use React.memo to create pure component
  function Item({ item, onChange, checked }) {
    console.log('rendering:', item.id)
    // can you gues why prop={new reference} is not a problem here
    //  this won't re render if props didn't
    //  change because it's a pure component
    return (
      <div>
        <div>{item.name}</div>
        <input
          type="checkbox"
          checked={checked}
          onChange={() => onChange(item.id, !checked)}
        />
      </div>
    )
  }
)
const SelectedItem = React.memo(
  //use React.memo to create pure component
  function SelectedItem({ item }) {
    console.log('rendering selected:', item.id)
    return (
      <div>
        <div>{item.name}</div>
      </div>
    )
  }
)

class Parent extends React.PureComponent {
  state = {
    data: [
      { id: 1, name: 'one' },
      { id: 2, name: 'two' }
    ],
    checked: {}
  }
  toggle = (_id, add) => {
    const newChecked = add
      ? {
          ...this.state.checked,
          [_id]: true
        }
      : // cannot use Object.fromEntries because SO babel is too old
        Object.entries(this.state.checked)
          .filter(([key]) => Number(key) !== _id)
          .reduce((result, [key, value]) => {
            result[key] = value
            return result
          }, {})
    this.setState({ checked: newChecked })
  }
  render() {
    return (
      <div>
        <div>
          <h4>items</h4>
          {this.state.data.map(item => (
            <Item
              item={item}
              onChange={this.toggle}
              checked={Boolean(this.state.checked[item.id])}
              key={item.id}
            />
          ))}
        </div>
        <div>
          <h4>Selected items</h4>
          {this.state.data
            .filter(item => this.state.checked[item.id])
            .map(item => (
              <SelectedItem item={item} key={item.id} />
            ))}
        </div>
      </div>
    )
  }
}

//render app
ReactDOM.render(<Parent />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

​