反应 |将数据从父组件传递给子组件 [英] React | pass data from parent to child component

问题描述

在 React 中，我有类似的文件

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

parent.js 包含文本框和按钮

child.js 包含 P 标签

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

问题

将按钮点击时父级的文本框值传递给子级并在子段落标签中显示该值.

完整代码 stackblitz

解决方案

更新了您的示例以将数据传递给子组件.

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

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

index.js

import React, { Component } from 'react';从'react-dom'导入{渲染}；从'./parent'导入父级；从 './child' 导入 Child；导入'./style.css';类 App 扩展组件 {构造函数(){极好的();this.state = {name: '反应',父文本框值:''};}handleParentData = (e) =>{this.setState({parentTextBoxValue: e})}使成为() {返回 (<div><父句柄数据={this.handleParentData}/><Child parentTextBoxValue={this.state.parentTextBoxValue}/>

);}}render(, document.getElementById('root'));

parent.js

import React, { Component } from 'react';从react-uikit-button"导入按钮；类父扩展组件{构造函数(道具){超级(道具)；this.state={TextBoxValue: ""}}提交值 = (e) =>{this.props.handleData(this.state.TextBoxValue)}onChange=(e)=>{this.setState({TextBoxValue: e.target.value})}使成为() {返回 (<div className=""><input type="text" name="TextBox" onChange={this.onChange}/><Button onClick={this.SubmitValue}>提交值</Button>

);}}导出默认父级；

child.js

import React, { Component } from 'react';类子扩展组件{构造函数(道具){超级(道具)；}使成为() {返回 (<div className="应用程序"><p>{this.props.parentTextBoxValue}</p>

);}}导出默认子项；

只是为了给我所做的，将 App.js 中的函数传递给父级，这有助于提升状态.在父组件中处理文本框的 onchange 和提交更新的应用程序状态.最后将此状态传递给子组件.

In React, I'm having Files like

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

parent.js contains Textbox and button

child.js contains P tag

App.js contains Both Parent and Child Component

Problem

Pass the Textbox value from Parent on button click to child and display the value in child paragraph tag.

Full Code stackblitz

解决方案

Updated your sample to pass data to child component.

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

Adding code below for quick reference

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;

Just to give what I did, Passed a function from App.js to parent which can be helped to lift the state up. handled onchange in parent component for text box and on submit updated app state. Finally passed this state to child component.

这篇关于反应 |将数据从父组件传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！