如何实现Edit for Modal框？

Question

我正在处理配方框的编辑功能，用户可以在配方面板中单击编辑，查看预先填充的配方标题和成分，并能够修改并保存要显示的更改。到目前为止，我已经能够显示食谱列表，添加新食谱并删除食谱，但我仍然对如何实施编辑功能感到困惑。

import React, { Component } from 'react';
import {FormInput} from './components/form';
import {RecipeList} from './components/recipe_list';
import {Button} from 'react-bootstrap/lib';


function parseNewRecipe(){
  const name = document.getElementById("recipe_name").value;
  const ingredients = document.getElementById("ing").value.replace(/\s/g,'').split(",");
  this.state.recipes.push({
    name, ingredients
  });

  this.setState({
    recipes: this.state.recipes
  });
  this.toggleModal();
}


class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      recipes:[{name:'Pumpkin Pie',ingredients:['Pumpkin Puree','Condensed Milk','Egg','Pumpkin Spice Pie','Pie Crust']},
      {name:'Spaghetti',ingredients:['Noodle','Tomato Sauce','Meatballs']},
      {name:'Onion Pie',ingredients:['Onions','Pie Crust']}],
      isOpen: false,


    };
     this.deleteRecipe = this.deleteRecipe.bind(this);
     this.editRecipe = this.editRecipe.bind(this);


  }
  toggleModal= (event) => {
      this.setState({
      isOpen: !this.state.isOpen
    });
  }

  addNewRecipe(){
    parseNewRecipe.call(this);
  }

   deleteRecipe(key){
      this.setState(prevState => ({
          recipes: prevState.recipes.filter(recipe => recipe !== key )
      }));
   }



   editRecipe(oldRecipe,newItem){
     this.toggleModal();

   }




   render() {
    return (
      <div className="container">
      <header className="jumbotron">
            <h1>  Your Recipe Box </h1>
      </header>
      <RecipeList recipes = {this.state.recipes} deleteRecipe={this.deleteRecipe} editRecipe={this.editRecipe}/>
      <Button onClick = {this.toggleModal} bsStyle="primary"> Add Recipe </Button>
      <FormInput ref = "input" show={this.state.isOpen} onClose={this.toggleModal} onAddRecipe={this.addNewRecipe.bind(this)
      } />
      </div>
    );
  }
}

export default App;

import {Modal} from 'react-bootstrap/lib';
import {Form, FormControl, FormGroup, ControlLabel, HelpBlock, Button} from 'react-bootstrap/lib';


function FieldGroup({ id, label, help, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}
export class FormInput extends Component{
    constructor(props){
        super(props);
        this.state ={editing: false};
    }


    render(){

        if(!this.props.show) {
      return null;
    }
        return(
            <div className="static-modal" >
                <Modal.Dialog>
                    <Modal.Header>
                        <Modal.Title>Add Recipe</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        <Form>
                            <FieldGroup
                                id="recipe_name"
                                type="text"
                                label="Recipe Name"
                                placeholder="Enter Recipe Name"/>
                             <FormGroup id="formControlsTextarea">
                                <ControlLabel>Ingredients</ControlLabel>
                                <FormControl id = "ing" value = {this.props.ingredients} componentClass="textarea" placeholder="Enter Ingredients, separated, by commas" />
                            </FormGroup>

                        </Form>
                    </Modal.Body>

                    <Modal.Footer>
                    <Button onClick={this.props.onClose}>Close</Button>
                    <Button onClick ={this.props.onAddRecipe} bsStyle="primary">Save Changes</Button>
                    </Modal.Footer>
                </Modal.Dialog>
            </div>
            );
    }
}