Question

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

由于所有指南均使用传统方式，因此我感到非常困惑，因为它们看上去与我所知道的完全不同。例如，我使用useState（）钩子，而不是在构造函数中使用“ this.state”。

有没有办法，或者挂钩，我看不到有可能将数据从子组件传递到父组件？

Answer 1

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

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

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

ChildForm具有本地状态以存储其inputValue。

当您单击Submit函数时，它将从父应用程序调用函数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>

有没有一种方法可以使用钩子将数据从孩子传递到父母？

3 个答案:

parent.js

child.js