有没有办法使用 Hooks 将数据从孩子传递给父母？

Question

作为 React 的绝对新手，我想将数据从子组件传递到父组件。但是如果我寻找这个问题，我总能找到使用“状态”和“回调”函数的“旧”方式。例如，参见这篇文章：https : //medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

由于所有指南都使用传统方式，我很困惑，因为它们看起来与我所知道的大不相同。例如，我没有在构造函数中使用“this.state”，而是使用 useState() 钩子。

有什么方法或者我看不到 Hook 可以将数据从子组件传递到父组件吗？

Answer 1

功能组件和类组件之间的流程没有区别。您可以通过传递带有 props 的函数并在子级使用它来更新父级的值。

父.js

import React, {useState} from 'react';

const Parent = () => {
    const [counter, setCounter] = useState(0);

    return (
        <Child updateCounter={setCounter}>

        </Child>
    )

}

孩子.js

const Child = (props) => {
    const {updateCounter} = props;

    return (
        <button onClick={() => updateCounter(some value)}>

        </button>
    )
}

Answer 2

想象一下，您有一个父组件 App，它具有处理 App 子组件表单提交的逻辑（可以是任何其他类型的逻辑）。

有ChildForm一个本地状态来存储其inputValue.

在本示例中，当您单击提交函数时，它将调用onSubmit父应用程序中的一个函数，并传递该函数inputValue（您可以传递组件内存在的任何其他值）以进行处理和提交。

所以它的要点是：

• 将函数从父级发送到子级，如下所示props
• 孩子将调用该函数发送一些数据作为参数
• 该函数将处理数据并可以触发父级的一些操作，例如

请参阅下面的片段：

function App() {
  
  function onSubmit(formState) {
    console.log('I will submit my ChildForm Input State: ' + formState);
  }
  
  return(
    <ChildForm
      onSubmit={onSubmit}
    />
  );
}

function ChildForm(props) {
  const [inputValue,setInputValue] = React.useState('');
  
  function onChange() {
    setInputValue(event.target.value);
  }
  
  return(
    <React.Fragment>
    <div>I am ChildForm</div>
    <input type='text' value={inputValue} onChange={onChange}/>
    <button onClick={()=>props.onSubmit(inputValue)}>Click to Submit through parent App</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>