React | pass data from parent to child component

问题

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

回答1:

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.

回答2:

import React from "react";

class Parent extends React.Component(){
    constructor(props){
        super(props);
        this.state={
            name:"suraj"
        }
    }

    render(){
        return(
            <div className = "parent">
                <child data={this.state.name}/> 
            </div>
        );
    }

}

export default Parent;

export function Child(props){
    return(
        <div>{props.data}</div>
    );
}

回答3:

On the button click you should be able to take the textbox's value and add it to your parent's state using the setState function.

Afterwards, your parent's render method should be called; because, the state was changed. You can then place the value held in states into an attribute on your child element.

<child message={value}>

Afterwards, you can access that message through the props in the child.

class child extends Component {
    render(){
        //use this.props.message to access message
    }
}

From there you can do whatever you want with the value.

回答4:

Within the Parent component

import React, { useState } from "react";
import Child from "./Child";

export default function App() {
  const [value, setValue] = useState("");

  const handleInputChange = event => {
    const { value } = event.target;
    setValue(value);
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log(value);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="name"
          placeholder="Name"
          onChange={handleInputChange}
        />
        <button type="submit">Submit</button>
      </form>

      <Child data={value} />
    </div>
  );
}

Within the Child component

import React from "react";

export default function Child({ data }) {
  return (
    <div className="App">
      <h1>Hello Child</h1>
      <p>{data}</p>
    </div>
  );
}

View on CodeSandbox

来源：https://stackoverflow.com/questions/48952882/react-pass-data-from-parent-to-child-component