问题

Question

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

    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>
  );

}

一个父亲和三个孩子。以回调为道具的纽扣子。输入子项和文本子项。

我想做的事情：单击按钮，然后将输入输入到另一个组件中，然后将其放入文本组件中。

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

Answer 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，这将有助于从子组件中检索信息，而又不会为子组件创建状态并将其设置为回调函数。

Answer 2

欢迎来到堆栈溢出，@哺乳动物！您走在正确的轨道上。但是，我建议您仔细阅读react tutorial和有关其他react hooks

的文档

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

您希望父母能够通过“按钮”孩子得到通知，
读取“ input”子项中的值，并且
使用该值更新“文本”子级。

在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>

React：使用props和callbacks在父子之间传递和检索数据

2 个答案:

问题

解决方案

其他建议