В React у меня есть файлы вроде

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

parent.js содержит текстовое поле и кнопку

child.js содержит тег P

App.js содержит родительский и дочерний компоненты

< Сильный > Проблема

Передайте значение Textbox от Родителя при нажатии кнопки дочернему элементу и отобразите значение в теге дочернего абзаца.

Полный код stackblitz

4
Selvin 23 Фев 2018 в 20:04

4 ответа

Лучший ответ

Обновлен ваш пример для передачи данных в дочерний компонент.

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, которая может помочь поднять состояние. обрабатывается замена в родительском компоненте для текстового поля и при отправке обновленного состояния приложения. Наконец передал это состояние дочернему компоненту.

2
Martijn Pieters 2 Дек 2019 в 09:07

При нажатии кнопки вы сможете получить значение текстового поля и добавить его в состояние вашего родителя с помощью функции setState.

После этого должен быть вызван метод render вашего родителя; потому что состояние было изменено. Затем вы можете поместить значение из состояний в атрибут вашего дочернего элемента.

<child message={value}>

После этого вы можете получить доступ к этому сообщению через реквизит ребенка.

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

Оттуда вы можете делать все что угодно со значением.

0
Tyler 23 Фев 2018 в 17:23

В компоненте приложения

import React, { Component } from 'react';
import Parent from './Parent';

class App extends Component {
  state= {
    data: '',
  }

  addFormValue = (data) => {
    this.setState({
      data,
    });   
  }

  render() {
    return (
      <div>
        <Parent addFormValue={this.addFormValue} data={this.state.data}/>
      </div>
    )
  }
}

export default App;

Внутри родительского компонента

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  constructor({props}) {
      super(props);
  }

  textBoxRef = React.createRef();

  getValue = (event) => {
    event.preventDefault();

    const textBoxValue = this.textBoxRef.value.value;            
    this.props.addFormValue(textBoxValue);
  };

  render() {
    return (
    <div>
      <form>
        <input type="text" name="name" placeholder="Name" ref={this.textBoxRef}/>
        <button type="submit" onClick={this.getValue}>Submit</button>
      </form>

      <Child data={this.props.data} />
    </div>
    );
  }
}

export default Parent;

Внутри дочернего компонента

import React from 'react'; 
    const Child = ({data}) => (
      <p>{data}</p>
    );  

export default Child

Посмотреть на CodeSandbox

0
Zoe 5 Окт 2018 в 12:09
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>
    );
}
2
georgeawg 22 Авг 2018 в 10:11