有没有办法使用 Hooks 将数据从 child 传递到 parent？

Question

作为 React 的绝对新手，我想将数据从 child 传递到 parent 组件。但是如果我查找这个问题，我总是会找到使用 "state" 和 "callback" 函数的 "old" 方法。参见这篇文章的例子：https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

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

有没有什么方法或者我看不到的 Hook 可以将数据从 child 传递到 parent 组件？

Answer 1

Functional 和 Class Component 之间的流程没有区别。您可以通过使用 props 传递函数并在子级上使用它来更新父级的值。

parent.js

import React, {useState} from 'react';

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

    return (
        <Child updateCounter={setCounter}>

        </Child>
    )

}

child.js

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

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

        </button>
    )
}

Answer 2

您需要将函数作为 props 从父组件传递给子组件，以便将数据向上传递到树

function Child({ num, onNumClick }) {
  return <span onClick={() => onNumClick(num)}>{num}</span>;
}

function Parent() {
  const [numList] = useState([1, 2, 3, 4, 5]);
  const [clickedItem, setClickedItem] = useState(null);

  const onNumClick = num => setClickedItem(num);

  return (
    <div className="App">
      {numList.map(n => (
        <Child num={n} onNumClick={onNumClick} />
      ))}
      {clickedItem && <p>You clicked on {clickedItem}</p>}
    </div>
  );
}

sandbox

Answer 3

假设您有一个 parent 组件应用程序，它具有处理作为应用程序 child 组件的表单的提交（可以是任何其他类型的逻辑）的逻辑。

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

当您点击提交功能时，它会从 parent 应用程序调用一个函数 onSubmit 并且它会传递它的 inputValue（您可以传递它的任何其他值存在于组件内）以进行处理和提交，在此示例中。

所以它的要点是：

将函数从 parent 发送到 child 作为 props
child 将调用该函数发送一些数据作为参数
该函数将处理数据并可以从 parent 触发一些操作，例如

请参阅下面的代码段：

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>

有没有办法使用 Hooks 将数据从 child 传递到 parent？

Ist there a way to pass data from child to parent using Hooks?

reactjs

react-hooks

parent.js

child.js