如何在 ReactJS 中从子组件设置父状态？

在 ReactJS 中，子组件不能直接修改其父组件的状态。然而，在某些情况下，我们需要从子组件中更改父组件的状态。在本文中，我们将介绍如何通过使用回调函数从子组件中设置父状态。

步骤

1. 在父组件中定义一个函数来设置需要更改的状态。该函数的名称可以自定义，我们将其称为 setParentState。该函数将被传递给子组件作为属性。

   class ParentComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         parentState: ''
       }
     }
   
     setParentState = (value) => {
       this.setState({
         parentState: value
       })
     }
   
     render() {
       return (
         <div>
           <ChildComponent setParentState={this.setParentState} />
         </div>
       );
     }
   }
   

   在上述代码中，我们定义了一个名为 setParentState 的函数，并将其传递给 ChildComponent 作为属性。

2. 在子组件中，调用从父组件传递来的函数，并将需要更改的状态值作为参数。

   class ChildComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         childState: ''
       }
     }
   
     handleChange = (event) => {
       const value = event.target.value;
       this.setState({
         childState: value
       });
       this.props.setParentState(value);
     }
   
     render() {
       return (
         <div>
           <input type="text" value={this.state.childState} onChange={this.handleChange} />
         </div>
       );
     }
   }
   

   在上述代码中，我们定义了一个名为 handleChange 的函数，用于处理输入框的值的更改。当输入框的值发生更改时，我们将值存储为组件状态 childState 的值并调用 setParentState 函数，并将该值作为参数传递。通过这样的方式，我们可以更改父组件的状态。

结论

通过上述步骤，我们学习了如何在 ReactJS 中从子组件设置父状态。我们定义一个函数在父组件中，并将其传递给子组件，然后在子组件中调用该函数并将更改后的状态值作为参数传递。这种方法可以使我们从子组件中更改父组件中的状态，从而实现更灵活的组件通信。