React中如何通过子组件更新父组件的projectToAdd状态？

Hey there! Let’s break down how to get your child component to update the parent’s projectToAdd state—this is a super common pattern in React, so you’re in the right place.

The core idea here is lifting state up: since the parent owns the projectToAdd state, we’ll pass a callback function from the parent to the child. When the child’s <li> is clicked, it will call this callback and send the new value back to the parent, which then updates its state.

Let’s walk through this with concrete code examples:

Step 1: Set Up the Parent Component #

In your parent component, you’ll need to:

1. Keep your existing projectToAdd state initialized with props.
2. Create a method to update this state.
3. Pass that method down to the child as a prop.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // Initialize state with the incoming prop value
    this.state = {
      projectToAdd: props.projectValue
    };

    // Bind the update method to ensure `this` refers to the parent instance
    this.updateProjectState = this.updateProjectState.bind(this);
  }

  // Method to update the parent's state
  updateProjectState(newProject) {
    this.setState({
      projectToAdd: newProject
    });
  }

  render() {
    return (
      <div>
        {/* Pass the callback function to the child component */}
        <ChildComponent onProjectClick={this.updateProjectState} />
        {/* Optional: Show current state to verify updates */}
        <p>Selected project to add: {this.state.projectToAdd}</p>
      </div>
    );
  }
}

Step 2: Implement the Child Component #

In the child component, you’ll receive the callback prop, then call it when the <li> is clicked—passing the new value you want to set in the parent’s state.

class ChildComponent extends React.Component {
  handleLiClick = (selectedProject) => {
    // Trigger the parent's callback with the new value
    this.props.onProjectClick(selectedProject);
  };

  render() {
    return (
      <ul>
        {/* Replace with your actual list items/data */}
        <li onClick={() => this.handleLiClick("Website Redesign")}>Website Redesign</li>
        <li onClick={() => this.handleLiClick("Mobile App Build")}>Mobile App Build</li>
        <li onClick={() => this.handleLiClick("API Integration")}>API Integration</li>
      </ul>
    );
  }
}

Quick Tips to Avoid Gotchas: #

• Binding this: We bind the parent’s update method in the constructor so this.setState works correctly when called from the child. Alternatively, you can use a class arrow function for updateProjectState to skip manual binding.
• Arrow Functions in onClick: Using an arrow function in the <li>’s onClick lets us pass a specific value to handleLiClick without immediately running the function.
• Functional Components with Hooks: If you’re using functional components instead, the pattern is almost identical—use useState in the parent, pass the setter function down to the child, and have the child call that setter on click.

内容的提问来源于stack exchange，提问作者Lizz Parody