如何从React中的子组件获得值?

Question

你能告诉我，我怎样才能从子组件child复制状态值到parent parent。子组件实现按钮状态的递增和递减。该值也应该显示在Parent中。谢谢!

import React, {useState} from 'react';
import Child from "./Child";
const Parent = () => {
const [value, setValue] = useState(0);
return (
<>
<span>{value}</span>
<Child data={value} />
</>
);
}
export default Parent;

import React, {useState} from 'react';
const Child = ({data}) => {
const [value, setValue] = useState(data);
const increment = () => {
setValue(prevState => prevState + 1)
};
const decrement = () => {
setValue(prevState => prevState - 1)
};
return (
<>
<button onClick={increment}>+</button>
<span>{value}</span>
<button onClick={decrement}>-</button>
</>
);
};
export default Child;

Answer 1

最简单的方法是在父组件中定义状态，然后将value和setValue作为道具传递给子组件。

<Child value={value} setValue={setValue} />

然后从props对象调用setValue来设置状态。

Answer 2

您可以通过将父方法作为prop传递给子方法来实现这一点，或者您可以使用redux在外部管理状态。此外，按照下面的讨论来更好地理解。