react子组件修改父组件state

在React中，子组件修改父组件的状态是通过回调函数的方式实现的。父组件将一个函数作为props传递给子组件，子组件在需要修改父组件状态时调用该函数。

首先，在父组件中定义一个函数，用来修改需要传递给子组件的状态。例如：

import React, { useState } from "react";

function ParentComponent() {
  const [parentState, setParentState] = useState("");

  const updateParentState = (newState) => {
    setParentState(newState);
  };

  return (
    <div>
      <ChildComponent updateParentState={updateParentState} />
      <p>Parent State: {parentState}</p>
    </div>
  );
}

然后，在子组件中，通过调用父组件传递过来的函数来修改父组件的状态。例如：

import React from "react";

function ChildComponent({ updateParentState }) {
  const handleClick = () => {
    updateParentState("New State");
  };

  return (
    <button onClick={handleClick}>Update Parent State</button>
  );
}

这样，当子组件的按钮被点击时，会调用`updateParentState`函数来修改父组件的状态，并且父组件会重新渲染。