Я изменил файлы, пожалуйста, просмотрите
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>
)
}
}