Передача значения текстового поля на другую страницу React на другой странице, тогда как отображается на той же странице
Мне трудно передать значение из одного компонента в другой компонент в React Js. У меня есть такие файлы, как App.js и Home.JS
App.js имеет одно поле ввода и один тег h1, при вводе в поле ввода значение будет отображаться внутри тега h1. Мне нужен тот же метод, тогда как вместо отображения на той же странице я хочу отображать то же значение в Home.js с помощью React Router.
Appp.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(){
super();
this.state = {
name : "sivaprakash",
age : 25
}
}
update(e){
this.setState({name: e.target.value})
}
render() {
return (
<div className = "App">
<header className = "App-header">
<img src = {logo} width = "50" height = "50" className = "App-logo" alt = "logo" />
</header>
<section>
<h1>{this.state.name} - {this.state.age}</h1>
<form>
<input type = "text" name = "tx1" onChange = {this.update.bind(this)} placeholder = "Type Something..."/>
</form>
</section>
</div>
);
}
}
export default App;
Home.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Home extends Component {
constructor(){
super();
this.state = {
name : "",
}
}
render() {
return (
<div className = "App">
<h1>{this.state.name} </h1>
</div>
);
}
}
export default Home;
Пожалуйста, дайте мне знать, если мой вопрос кажется непонятным.
вы используете redux в своем приложении?
@Ashwamegh Нет, нужен ли нам Redux в таком процессе?
@Justcode, я обновил свой код. посмотрите плз.
Да, redux или любая подобная библиотека может упростить вам передачу данных, или вы можете использовать React Context в своем приложении. Поскольку эти компоненты не связаны. Таким образом, вы не можете передавать данные в качестве реквизита.
Я бы определенно не рекомендовал использовать ни сокращение, ни контекст реакции для такой простой операции. Я напишу ответ, как бы это сделать, используя простое состояние реагирования компонента.
@darksmurf я тоже хочу знать, что
Возможный дубликат Как передать реквизит {this.props.children}
Ответы 2
Во-первых, вы должны отрендерить Home.js в App.js.
import Home from './home_component_path'
пример: import Home from './Home';
Затем визуализируйте компонент Home ниже раздела form или где угодно и передайте состояние App.js в качестве реквизита в Home.js, как это в App.js.
<Home user = {this.state}/>
В Home.js компонентный рендер передал такие реквизиты.
Вместо <h1>{this.state.name} </h1> сделайте это <h1>{this.props.user.name} </h1>
Спасибо за ваше предложение. согласно вашей треске Value печатается в самом App.js, но мне нужно перейти к Home.js и я хочу напечатать там в Home.js.
В React это обычно решается с помощью состояние подъема вверх, то есть вы сохраняете состояние в родительском компоненте и передаете значение (и, если хотите, обработчик изменений) дочерним компонентам, отображающим данные.
Используя React Router, вы можете сделать что-то вроде этого:
Parent.js:
class Parent extends Component {
state = {
name: "sivaprakash",
age: 25
};
changeName = newName => this.setState({ name: newName });
render() {
return (
<Router>
<Switch>
<Route path = "/app"
render = {() =>
<App name = {this.state.name}
age = {this.state.age}
changeName = {this.changeName} />
} />
<Route path = "/home"
render = {() =>
<Home name = {this.state.name} />
} />
</Switch>
</Router>
)
}
}
App.js:
class App extends Component {
update(e) {
this.props.changeName(e.target.value);
}
render() {
return (
<div className = "App">
<header className = "App-header">
<img src = {logo}
width = "50"
height = "50"
className = "App-logo"
alt = "logo" />
</header>
<section>
<h1>{this.props.name} - {this.props.age}</h1>
<form>
<input type = "text"
name = "tx1"
onChange = {this.update.bind(this)}
placeholder = "Type Something..." />
</form>
</section>
</div>
);
}
}
Home.js:
class Home extends Component {
render() {
return (
<div className = "App">
<h1>{this.props.name} </h1>
</div>
);
}
}
Не забудьте отметить ответ как правильное решение;)
где ваш домашний компонент? пожалуйста, опубликуйте