在 React 中将参数从子组件移动到父组件。
为了便于理解代码，React 在将数据从父组件传递到子组件时实现了单向数据流，也称为“单向数据绑定”。
然而，我们经常需要将一些数据从子组件传递回父组件，例如在表单中，当用户的输入影响到父组件时。
对于 React 新手来说，有时很难掌握如何将数据从子组件传递回父组件的模式。本文将介绍一种简单的方法。
用例
假设我们有一个父元素，它渲染了三个子元素。每个子元素都有一个按钮，每次用户按下按钮时，父元素都应该显示按钮上选择的颜色。
function Parent() {
return (
<>
<h1>Selected color: </h1> // show selected color
{['green','red','blue'].map((color) => (
<Child color={color} ... />
))}
</>
)
}
function Child({ color }) {
return (
<button value={color}>{color} button</button>
)
}
通过 props 从上到下传递参数很容易，但要将数据发送回去可能看起来比较棘手。
回电救援
让我们从下往上逆向工程：
- 为了捕获按钮点击事件，我们需要添加一个处理程序。
function Child({ color }) {
function handleClick(event) {
// do something meaningful
}
return (
<button name={color} onClick={handleClick}>{color}</button>
)
}
- 在处理程序内部，是调用另一个函数（回调函数）的理想位置，该回调函数由父组件通过 props 传递过来
onChildClick。请注意，我们尚未创建或传递该回调函数，稍后会进行。回调函数可以接收任何参数，父组件可以访问这些参数。在本例中，我们将传递一个name来自按钮的参数。
function Child({ color, onChildClick }) {
function handleClick(event) {
onChildClick(event.target.name); // pass any argument to the callback
}
return (
<button name={color} onClick={handleClick}>{color}</button>
)
}
- 最后一步是从回调函数中读取参数，并将它们保存到父组件状态中以供后续使用。
- 创建回调函数
handleChildClick并通过 prop 将其传递给子组件onChildClick。 - 添加
useState钩子，分配状态变量color和一个setColor用于更新该状态变量的函数。 handleChildClick从子组件传递的函数中读取参数，并调用setColor函数以使用新值更新状态。
- 创建回调函数
function Parent() {
const [color, setColor] = useState('');
function handleChildClick(color) {
setColor(color);
}
return (
<>
<h1>selected color: {color}</h1>
{['green','red','blue'].map((color) => (
<Child color={color} onChildClick={handleChildClick} ... />
))}
</>
)
}
差不多就是这样，每次点击按钮时，我们都会调用事件处理程序，在事件处理程序内部，我们会调用一个回调函数，props然后在回调函数内部（在本例中handleChildClick）将状态设置到父组件。
你可能会遇到的困难
- 直接从事件调用回调函数并传递参数。这将立即对所有已渲染的按钮元素调用该函数，但按钮本身并不会起作用。
<button onClick={onChildClick(color)} ... />
- 将参数传递给事件处理程序也会立即对所有已渲染的按钮元素调用该函数，并且该函数将不起作用。
<button onClick={handleClick(color)} ... />
- 使用内联箭头函数并在其中调用回调函数，每次按钮渲染时都会创建一个新的箭头函数；此外，如果不显式地将事件对象传递给回调函数，则会丢失事件对象。这种方法可行，但效率不高。
<button onClick={(event) => onChildClick(color, event)} ... />
- 如果使用类组件和方法作为事件处理程序，请不要忘记绑定上下文。
bind所有其他参数（例如上下文）都event将被转发。
<button onClick={this.handleClick.bind(this, color)} .../>
总结
从子类向父类传递参数并不复杂，只是可能需要花点时间才能找到调用回调函数的正确位置。希望本文能帮助大家解惑。
文章来源：https://dev.to/spukas/moving-arguments-from-child-to-parent-component-in-react-25lp