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

Answer 2

这解决了我的问题：https://medium.com/@wlodarczyk_j/handling-multiple-checkboxes-in-react-js-337863fd284e

但是，如果您有更好的选择，我在这里听。

基本上，我创建了一个地图，并将handleChange传递给TableItem。因此，当选中/取消选中复选框时，其状态将传递给父组件。

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

2 个答案: