【问题标题】：React : Passing and retrieving data between parent and child using props and callbacksReact：使用道具和回调在父子之间传递和检索数据
【发布时间】：2020-08-22 19:42:20
【问题描述】：

我有一个小问题，我知道我可以使用 props 向我的孩子发送数据，并使用回调来获取数据给我的父母。

    function App() {

  return (
  
  <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

        
        <Test name="My Button" hit={replace}/>

        <Input bringText={}/>

        <Spot replacement=""/>

      
      </header>
    </div>
  );

}

一个父亲和三个孩子。带有回调作为道具的按钮子项。一个输入子项和一个文本子项。

我想要做的：当我点击按钮时，在另一个组件中接受输入，并将其放入文本组件中。

我使用回调返回父组件，但现在我不知道该怎么办。

【问题讨论】：

你可以使用 React context api 让所有东西都可以通过组件使用

标签： javascript reactjs callback react-props react-component

【解决方案1】：

问题

你有一个包含三个子组件的 react 组件：一个文本输入组件、一个按钮组件和一个文本输出组件。

解决方案

你需要状态。您可以通过创建 React.Component 子类或使用 State Hook 来做到这一点 - 如果使用 React 16.8+。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props); // thanks dude!
    // creating our state, the output text is initially empty
    this.state = {output: ""}
  }
  render() {
    const { output } = this.state; // extracting our state, just output
    const input = React.createRef() // creating a reference for our input
    return (
      <div ref={output} >
        {/* INPUT COMPONENT */}
        <input ref={input}/>
        
        {/* BUTTON COMPONENT */}
        <button onClick={() => this.setState({output: input.current.value})}> 
          Button 
        </button>
        
        {/* OUTPUT LABEL COMPONENT */}
        <h1> { output } </h1>
      </div>
    );
  }
}
export default App;

进一步的建议

您应该阅读状态并通读react tutorial - 它真的很有帮助
了解状态和反应语法后，您应该了解Refs，这将有助于从子组件中检索信息，而无需为您的子组件创建状态并将其设置为回调。

【讨论】：

【解决方案2】：

欢迎来到 Stack Overflow，@Mammal！你在正确的轨道上。但是，我建议您阅读react tutorial 和有关不同react hooks 的文档

从逻辑上讲，你有三个要求：

您希望父母能够收到“按钮”孩子的通知，
读取“输入”子项中的值，然后
使用该值更新“文本”子项。

在 React 世界中，您可以通过以下方式做到这一点：

提供回调方法作为子按钮的道具。
保留对输入子项的引用（或ref），以便父项稍后可以读取其中的值。
每次单击按钮时，使用 react state 使用输入子项的值更新文本子项。

下面给出了一个工作示例。代码是非常不言自明的imo。但是，如果有什么不明白的，请发表评论。

const MyText = ({labelText}) => 
  (<p>You entered {labelText}</p>);
const MyInput = ({reference}) => 
  (<input type="text" ref={reference} />);
const MyButton = ({handleClick}) => 
  (<button onClick={handleClick}>Submit</button>);

function Hello() {
  const [label, setLabel] = React.useState('');
  const inputField = React.useRef(null);
  const handleClick = (event) => {
    setLabel(inputField.current.value);
  }
  return (
    <div className="App">
      <MyInput reference={inputField} />
      <MyButton handleClick={handleClick} /> 
      <MyText labelText={label} />
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

【讨论】：