javascript - 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)} ，但是，这也不是必需的，您可以简单地写 {this.handleDelete}在 App 中，因为您的 handleDelete 函数已经绑定(bind)并且它从子组件接收到值。

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功能。