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

Question

在 React 中，我有这样的文件

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

parent.js 包含文本框和按钮

child.js包含P标签

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

问题

将单击按钮时父级的文本框值传递给子级，并在子级段落标记中显示该值。

完整代码 stackblitz

Answer 1

单击按钮时，您应该能够获取文本框的值并使用 setState 函数将其添加到 parent 的状态。

之后，您的 parent 的 render 方法应该被调用；因为，状态改变了。然后，您可以将状态中保存的值放入 child 元素的属性中。

<child message={value}>

之后，您可以通过 child 中的道具访问该消息。

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

从那里你可以用这个值做任何你想做的事。

Answer 2

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

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 传递给父级，这有助于提升状态。在文本框的父组件中处理 onchange 并提交更新的应用程序状态。终于把这个状态传递给了子组件。

Answer 3

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

Answer 4

在父组件中

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

在子组件中

import React from "react";

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

View on CodeSandbox

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

React | pass data from parent to child component

reactjs

react-props