Если я так понимаю, у вас есть: * главный компонент, который содержит компонент, заботящийся о форме * компонент, который заботится о списке элементов * компонент, который заботится о каждом элементе - начнется с itemComponent:
import React, { Component } from "react";
class Item extends Component {
state = { item: this.props.value };
render() {
// we suppose that item dont contains duplicate key
var item = this.state.item;
return (
<li key={item.key}>
<span> {item.name} </span>
<span> {item.day} </span>
<span> {item.dob} </span>
<button
className="btn btn-light"
onClick={() => this.props.handleEdit(item)}
>
edit
</button>
<button
className="btn btn-danger"
onClick={() => this.props.handleDelete(item /*or item.key*/)}
>
delete
</button>
</li>
);
}
}
export default Item;
для компонента формы элемента enet:
import React, { Component } from "react";
class ItemForm extends Component {
state = {
item: {
day: "",
name: "",
dob: "",
key: ""
}
};
handleEditCancel(item) {
console.log(item);
}
handleChange() {
console.log("in handle change");
}
render() {
var item = this.state.item;
return (
<form onSubmit={this.handleUpdate}>
<input
className=""
name="name"
value={/* this section */ item.name}
placeholder="Celebrant's Name"
// ref={name => (this.name = name)}
onChange={this.handleChange}
required
/>
<input
className=""
type="number"
name="day"
min="1"
max="31"
value={item.day}
onChange={this.handleChange}
// ref={day => (this.day = day)}
placeholder="day"
/>
<input
className=""
name="dob"
onChange={this.handleChange}
type="month"
value={item.dob}
/>
<button type="submit">update</button>
{/* <button onClick={() => this.props.handleEditCancel(this.state.option)}></button> */}
<button onClick={this.handleEditCancel}>cancel</button>
</form>
);
}
}
export default ItemForm;
для элементов основных компонентов:
import React, { Component } from "react";
import ItemForm from "./item-form";
import Item from "./item";
class Items extends Component {
state = { items: [] };
handleEditCancel(item) {
// you can either put the edit in the master component or in child component but I prefer the master component take care of all his child delete add or modify any items
console.log(item);
}
handleEdit(item) {
console.log("handle edit", item);
}
handleDelete(item) {
console.log("handle delete", item);
}
componentDidMount() {
var items = [
{ Key: 1, day: 1, name: "name1", dob: "dob1" },
{ Key: 2, day: 2, name: "name2", dob: "dob2" },
{ Key: 3, day: 3, name: "name3", dob: "dob3" }
];
this.setState({ items: items });
}
render() {
// we suppose that the each item contain a property Key
return (
<div>
<ItemForm
handleEditCancel={this.handleEditCancel.bind(this)}
></ItemForm>
<div>
{this.state.items.map(item => (
<Item
key={item.Key}
value={item}
// add button here update and delete
handleEdit={this.handleEdit.bind(this)}
handleDelete={this.handleDelete.bind(this)}
/>
))}
</div>
</div>
);
}
}
export default Items;
после создания другого компонента для входов и кнопки. Идея состоит в том, что главные компоненты должны позаботиться обо всем, о любом обновлении, добавлении или удалении действий и передавать информацию дочерним элементам и реквизитам. надеюсь, это поможет.