javascript - 使用 React + Redux 获取所有选中的复选框及其相关数据

Question

我在后台有一个ajax请求，它获取论坛帖子并将它们作为表项在循环中呈现( <tr> 和 <td> )。所有项目都有 checkbox 。当用户选中复选框并最终按下完成按钮时，我想获取所有选中的项目，包括其数据。 (不仅仅是id或name)

如果你看看我的演示，你就会明白我想要做什么。

我尝试过使用状态，但如何添加 state到 ajax 响应数据？

对于演示，我创建了一个帖子 const 。它实际上来自ajax回复。我没有能力更改他们的数据。

实时编辑器:https://stackblitz.com/edit/react-bzwmsg

现场演示:https://react-bzwmsg.stackblitz.io

Answer 1

我已经更改了文件，请检查一下

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import TableItem from './TableItem';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      items:[]
    };

    this.handleSelected = this.handleSelected.bind(this)
    this.handleAddItem = this.handleAddItem.bind(this)

  }

  handleSelected() {
    // how to get items here? (when user select via checkboxes.)
    const items = this.state.items;
    alert("Selected items are: " + JSON.stringify(items));

  }

   handleAddItem(e,item){
      let items = [...this.state.items]
      var ids = items.map(ele => ele.id);
      if(e.target.checked)
          items.push(item)
      else {
        var index = ids.indexOf(item.id);
        items.splice(index,1);
      }

      this.setState({items});
    }

  render() {

    // posts actually came from ajax request...
    const posts = [
      {
        id: 1,
        name: 'Text 1'
      },
      {
        id: 2,
        name: 'Text 2'
      },
      {
        id: 3,
        name: 'Text 3'
      }
    ]
   console.log(this.state.items)
    return (
      <div>
        {posts.map((fx, i) => {
           { /* here i loop them and render... */ }
          return (
            <TableItem key={fx.id} data={fx} handleAddItem={this.handleAddItem} />
          )
        })}
        <div>
        { /* I need to get checked items outisde of TableItem. */ }
        <button onClick={this.handleSelected}>Get Selected Items (with ID, Name...)</button>
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

TableItems.js

import React from 'react'



export default class TableItem extends React.Component {

  constructor(props) {
    super(props)
    this.state = { checked: false }
  }

  render() {

    return (
      <tr>
        <td><input onChange={(e) => this.props.handleAddItem(e,this.props.data) } type="checkbox" defaultChecked={this.state.checked} /></td>
        <td>{this.props.data.name}</td>
      </tr>
    )
  }
}