如何在React中使用Forms从另一个React组件编辑项目？

Question

简单地，想象一个具有“添加/编辑”模式（引导程序）的列表页面，用于管理列表中的项目。

列表本身是一个反应组件：

<List Items={items} />

List组件呈现列表项的数组，这些列表项也是react组件：

<ListItem Item={item} />

“添加/编辑”表单也是一个反应组件：

<ItemForm Item={item} />

列表中的每个项目都将包含编辑链接，该链接将触发添加/编辑模式，以显示和填充要编辑的选定项目的值。

问题是如何使用嵌套在{{1中的item object中的编辑链接将<ItemForm />传递到表单<ListItem />进行编辑}}

<List />

class ListItem extends React.Component {
  render() {
    return (
      <li>
        <label>{this.props.Item.Name}</label> - 
        <a> Edit </a>
      </li>
    );
  }
}

class List extends React.Component {
  render() {
    const rows = [];

    this.props.Items.forEach(item => {
      rows.push(<ListItem key={item.ItemID} Item={item} />);
    });

    return (
      <ul>
        {rows}
      </ul>
    );
  }
}

var sampleItems = [
  {ItemID: 1, Name: 'item 1'},
  {ItemID: 2, Name: 'item 2'},
  {ItemID: 3, Name: 'item 3'}
]

ReactDOM.render(
  <List Items={sampleItems} />, 
  document.getElementById("list")
);

class ItemForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { Name: '' };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const name = target.name
    this.setState({
      [name]: event.target.value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    //handles submit code
    alert(this.state.Name + ' saved!');
  }

  render() {
    return (
      <form key="item-form" onSubmit={this.handleSubmit}>
        <div>
          <label>Item Name:</label>
          <input
            name="Name"
            type="text"
            value={this.state.Name}
            onChange={this.handleInputChange} />
        </div>
        <button type="submit">Save changes</button>
      </form>
    );
  }
}


ReactDOM.render(
  <ItemForm />,
  document.getElementById("form-container")
);