反应| 将数据从父组件传递到子组件

Question

在React中，我有类似的文件

--parent.js
--child.js
--App.js

parent.js 包含文本框和按钮

child.js 包含P标签

App.js 包含父组件和子组件

问题

将“父级”上的“文本框”值传递给子级，并将其显示在子级标记中。

完整代码 堆叠

Answer 1

更新了示例以将数据传递给子组件。

https://stackblitz.com/edit/react-
trmj9i?file=child.js

在下面添加代码以供快速参考

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Parent from './parent';
import Child from './child';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      parentTextBoxValue: ''
    };
  }
  handleParentData = (e) => {
this.setState({parentTextBoxValue: e})
  }

  render() {
    return (
      <div>
        <Parent handleData={this.handleParentData} />
        <Child parentTextBoxValue={this.state.parentTextBoxValue}/>
      </div>
    );
  }
}

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

parent.js

import React, { Component } from 'react';
import Button from 'react-uikit-button';

class Parent extends Component {

constructor(props){
    super(props);
    this.state={TextBoxValue: ""}
}

  SubmitValue = (e) => {
     this.props.handleData(this.state.TextBoxValue)
  }

   onChange=(e)=>{
this.setState({TextBoxValue: e.target.value})
   } 
  render() {
    return (
      <div className="">
        <input type="text" name="TextBox"  onChange={this.onChange}
         />
        <Button onClick={this.SubmitValue}>Submit Value</Button>
      </div>
    );
  }
}

export default Parent;

child.js

import React, { Component } from 'react';

class Child extends Component {

    constructor(props){
        super(props);
    }


  render() {
    return (
      <div className="App">
       <p>{this.props.parentTextBoxValue}</p>
      </div>
    );
  }
}

export default Child;

为了说明我所做的事情，将App.js中的一个函数传递给了parent，这可以帮助提升状态。处理了文本框和提交更新的应用程序状态的父组件中的onchange。最后将此状态传递给子组件。