В 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';
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 в родительский, которая может помочь поднять состояние. обрабатывается при изменении родительского компонента для текстового поля и при отправке обновленного состояния приложения. Наконец передал это состояние дочернему компоненту.
В родительском компоненте
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>
);
}
При нажатии кнопки вы сможете взять значение текстового поля и добавить его в состояние вашего родителя с помощью функции setState.
После этого должен быть вызван родительский метод рендеринга; потому что состояние было изменено. Затем вы можете поместить значение, содержащееся в состояниях, в атрибут вашего дочернего элемента.
<child message={value}>
После этого вы можете получить доступ к этому сообщению через props в child.
class child extends Component {
render(){
//use this.props.message to access message
}
}
Оттуда вы можете делать с ценностью все, что захотите.
