在 React 中，值没有从子组件传递到父组件

Question

正如您在下面的两个组件中看到的那样，我想通过单击面板组件中的按钮来删除食谱（在应用程序组件中）， 我在应用程序中有一个删除配方的方法，并将一个 prop(onclick) 发送到子面板组件。 Panel 然后从配方映射中获取索引，并在单击按钮后执行 handleDelet 方法将索引发送回父级。但不，这是行不通的！

    class App extends React.Component {

  state={
    addRecipe:{recipeName:"",ingredients:[]},
    recipes:[{recipeName:"Apple",ingredients:["apple","onion","spice"]},
            {recipeName:"Apple",ingredients:["apple","onion","spice"]},
            {recipeName:"Apple",ingredients:["apple","onion","spice"]}]
  }
handleDelete = (index) => {
  let recipes = this.state.recipes.slice();
  recipes.splice(index,1); //deleting the index value from recipe
  this.setState({recipes}) //setting the state to new value
  console.log(index,recipes)
}
  render() {
    return (
      <div className="container">
        <PanelComponent recipes={this.state.recipes} onClick={()=>this.handleDelete(index)}/>
        <ModalComponent />
      </div>
    );
  }
}

class PanelComponent extends React.Component {
  handleDelete = (index) => {
    this.props.onClick(index); //sending index to parent after click
    console.log(index)
  }
  render() {

    return (
      <PanelGroup accordion>
        {this.props.recipes.map( (recipe,index) => {
          return(

          <Panel eventKey={index} key={index}>
          <Panel.Heading>
            <Panel.Title toggle>{recipe.recipeName}</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>
            <ListGroup>
              {recipe.ingredients.map((ingredient)=>{
                return(<ListGroupItem>{ingredient}</ListGroupItem>);
              })} 
            </ListGroup>
            <Button bsStyle="danger" onClick={()=>this.handleDelete(index)}>Delete</Button>
              <EditModalComponent />
          </Panel.Body>
        </Panel>

          );

        })}


      </PanelGroup>
    );
  }
}

Answer 1

您的代码中的实际错误是，在父级的 onClick 中使用箭头函数时，您传递了错误的参数，而不是 {()=>this.handleDelete(index)} 您应该写的是 {(value)=>this.handleDelete(value)}，但是，这也不是必需的，您可以在 App 中简单地编写 {this.handleDelete}，因为您的 handleDelete 函数已经绑定并且它接收来自子组件的值。

render() {
    return (
      <div className="container">
        <PanelComponent recipes={this.state.recipes} onClick={(value)=>this.handleDelete(value)}/>
        <ModalComponent />
      </div>
    );
  }

{()=>this.handleDelete(index)} 与 {(value)=>this.handleDelete(value)} 的区别在于，在第一种情况下，您明确传递从 App 组件中的 map 函数获得的索引，而在第二种情况下，从子项传递的值执行this.props.onClick(value) 时的组件被提供给handleDelete 函数。

Answer 2

您错误地将函数作为道具发送。您将函数的结果作为道具而不是函数本身发送

  class App extends React.Component {

 state={
addRecipe:{recipeName:"",ingredients:[]},
recipes:[{recipeName:"Apple",ingredients:["apple","onion","spice"]},
        {recipeName:"Apple",ingredients:["apple","onion","spice"]},
        {recipeName:"Apple",ingredients:["apple","onion","spice"]}]
 }
handleDelete = (index) => {
 let recipes = this.state.recipes.slice();
 recipes.splice(index,1); //deleting the index value from recipe
 this.setState({recipes}) //setting the state to new value
 console.log(index,recipes)
 }
 render() {
   return (
     <div className="container">
         //change here
       <PanelComponent recipes={this.state.recipes} onClick={this.handleDelete}/>
    <ModalComponent />
  </div>
  );
 }
 }