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

在 ReactJS 中，我们可以通过将值作为子组件的 prop 传递来设置子组件中的状态。有时，我们需要在 ReactJS 中将状态从子组件设置为父组件。

我们可以在父组件中创建一个状态处理函数，并将其作为子组件的 prop 传递。之后，我们可以使用子组件函数来设置父组件的状态。通过这种方式，我们可以管理父组件的状态。

在函数式组件中从子组件设置父组件状态

我们可以通过将状态处理函数作为子组件的 prop 传递，在函数式组件中从子组件设置父组件的状态。

无论何时我们将任何函数作为组件 prop 传递，我们都可以从子组件执行它，即使它是在父组件中定义的。

语法

用户可以遵循以下语法来处理 React 函数式组件中从子组件设置父组件的状态。

// in the parent component
<Child change = {handleState} />

// in the child component
<button onClick = {() => change()}> Change Value from child </button>

在上面的语法中，我们将 handleState() 函数作为子组件的 prop 传递。在子组件中，我们调用 change() 函数，该函数执行父组件的 handleState() 函数。

示例

在 App.js 文件中，我们使用钩子创建了状态变量。我们还创建了 handleState() 变量，它更改状态变量的值。

此外，我们导入了子组件并将 handleState() 函数作为子组件的 prop 传递。

文件名：- App.js

import React, { useState } from "react";
import Child from "./Child";

export default function App() {
   let [state, setState] = useState("Initial");
   function handleState() {
      setState("state Changed from child component!");
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Handling the <i> parent state from child component </i> in ReactJS.{" "}
         </h2>
         <div> The input value is {state}. </div>
         <Child change = {handleState} />
      </div>
   );
}

文件名：Child.js

import React, { useState } from "react";

function Child({ change }) {
   return (
      <div>
         <button onClick = {() => change()}> Change Value from child </button>
      </div>
   );
}
export default Child;

输出

它将产生以下输出：

单击“从子组件更改值”按钮时，将产生以下输出：

在上面的输出中，用户可以观察到，当他们单击按钮时，它会更改父组件的状态。

示例

在第一个示例中，我们通过将函数作为子组件的 prop 传递来更改子组件中父组件的状态，但是我们为父组件的状态设置了硬编码值。

在下面的示例中，我们还将值从子组件传递到父组件，并使用从子组件获得的新值更新父组件的状态。

文件名：App.js

import React, { useState } from "react";
import Child from "./Child";

export default function App() {
   let [state, setState] = useState("Initial");
   function handleState(newValue) {
      setState(newValue);
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Handling the <i> parent state from child component </i> in ReactJS.{" "}
         </h2>
         <div>
            The input value in child state accessing from parent state is {state}.
         </div>
         <br></br>
         {/* pass handleState function as a prop of child component */}
         <Child change = {handleState} />
      </div>
   );
}

文件名：Child.js

import React, { useState } from "react";

// accessing the change function from the prop.
function Child({ change }) {
   const [value, setNewValue] = useState("");
   function handleChange(event) {
      let value = event.target.value;
      setNewValue(value);
      change(value);
   }
   return (
      <div>
         <input
            placeholder = "Enter some texts."
            value = {value}
            onChange = {handleChange}
         />
      </div>
   );
}
export default Child;

输出

输入一些文本时：

在上面的输出中，用户可以观察到输入元素位于子组件内。我们在输入字段中写入的内容会反映在父组件中。

在类组件中从子组件设置父组件状态

我们也可以在类组件中将方法作为子组件的 prop 传递，以处理子组件中父组件的状态。

语法

用户可以遵循以下语法来处理类组件中子组件的父组件状态。

<Child changeState = {this.changeState} />
<button onClick = {this.changeState}> Change parent's state </button>

在上面的语法中，我们使用 this 关键字访问函数并将其作为子组件的 prop 传递。用户可以看到我们如何从子组件调用 changeState() 函数。

示例

在 App.js 文件中，我们在构造函数中定义了状态。我们还定义了 changeState() 方法，该方法设置状态值。changeState() 方法将更新的值作为参数，我们用它来更新状态的值。

文件名：App.js

import React, { useState } from "react";
import Child from "./Child";

class App extends React.Component {
   constructor(props) {
      super(props);
      this.changeState.bind(this);
      this.state = { value: "Empty" };
   }
   changeState = (newValue) => {
      this.setState({ value: newValue });
   };
   render() {
      return (
         <div>
            <h2>
               {" "}
               Handling the <i> parent state from child component </i> in class components
            </h2>
            <h3> The value of state variable is {this.state.value}.</h3>
            <Child changeState = {this.changeState} />
         </div>
      );
   }
}
export default App;

在 Child.js 文件中，我们在单击按钮时执行 handleChange() 函数。handleChange() 方法通过传递新值作为参数来调用 prop 的 changeState() 方法。

文件名：Child.js

import React from "react";
import { Component } from "react";

// accessing the change function from the prop.
class Child extends Component {
   constructor(props) {
      super(props);
      this.handleChange.bind(this);
   }
   
   handleChange = () => {
      this.props.changeState("This is value set up from child component!");
   };
   render() {
      return (
         <div>
            <h3> This is a child component! </h3>
            <button onClick = {this.handleChange}> Change parent's state </button>
         </div>
      );
   }
}
export default Child;

输出

单击“更改父组件的状态”按钮时，将产生以下输出：

在本教程中，我们学习了如何从子组件设置父组件的状态。实现目标的常用方法是将状态处理函数作为子组件的 prop 传递，并通过传递新的状态值作为参数来从子组件执行处理程序函数。

更新于：2023年10月26日

36K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始
广告