Question

在我的项目中，我有两个组件，一个是App.js，它是Parent组件，另一个是Child.js，这是Child组件。

现在，在Child.js组件中，我有一个按钮，我编写了一些代码来更改Child.js组件按钮的背景色和文本颜色。而且工作正常。

现在我在想什么是单击按钮之前在Child.js组件中，按钮的背景颜色为黄色，文本颜色为白色。现在，如果我单击该按钮，则按钮的背景颜色和文本颜色将会更改。

现在，我必须将子组件的更新状态传递给App.js组件。

仅当我单击“子级”组件时，才必须将onClick函数从子级传递给“父级”。

这是我的代码

这是App.js

import React, { useState } from 'react';
import './App.css';
import Child from './Child/Child';

const App = () => {
  return (
    <div>
      <button className='btn btn-danger'>Parent button</button>
      <Child></Child>
    </div>
  )
}

export default App

这是Child.js

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

const Child = () => {
    const [color, setColor] = useState('yellow');
    const [textColor, setTextColor] = useState('white');
    return (
        <div>
            <button className='btn btn-primary mt-5' style={{ background: color, color: textColor }}
                onClick={() => { setColor("black"); setTextColor('red') }}
            >Child Button</button>
        </div>
    )
}

export default Child

如果您不确定我是否有疑问，请发表评论。

Answer 1

将函数作为道具传递，只要您在“孩子”中单击按钮即可执行

https://codesandbox.io/s/access-child-component-method-react-hook-dqy0z

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

const Parent = () => {
  const [color, setColor] = useState("");
  const [textColor, setTextColor] = useState("");

  function func(color, textColor) {
    setColor(color);
    setTextColor(textColor);
  }

  return (
    <div>
      <button
        style={{ background: color, color: textColor }}
        className="btn btn-danger"
      >
        Parent button
      </button>
      <Child parentCallback={func} />
    </div>
  );
};

export default Parent;

import React, { useState } from "react";

const Child = ({ parentCallback }) => {
  const [color, setColor] = useState("yellow");
  const [textColor, setTextColor] = useState("white");

  function colorSet() {
    setColor("black");
    setTextColor("red");
    parentCallback("black", "red");
  }

  return (
    <div>
      <button
        className="btn btn-primary mt-5"
        style={{ background: color, color: textColor }}
        onClick={colorSet}
      >
        Child Button
      </button>
    </div>
  );
};

export default Child;

Answer 2

将其从子级移至应用程序：

const [color, setColor] = useState('yellow');
const [textColor, setTextColor] = useState('white');

不将这些值和函数传递给孩子：

<Child
  color={color}
  setColor={setColor}
  textColor={textColor}
  setTextColor={setTextColor}
>

现在您可以通过道具访问Child中的所有对象了

const Child = ({ color, setColor, textColor, setTextColor}) => { ...

换句话说，完全从子级删除状态（和状态更新程序功能）。

如何在React中将状态从子组件传递到父组件

2 个答案: