- 首页
- 前端开发
- 如何在 REACT 中从另一个同级或导入的组件更新同级组件的状态
如何在 REACT 中从另一个同级或导入的组件更新同级组件的状态
[英] How to update the state of a sibling component from another sibling or imported component in REACT
本文介绍了如何在 REACT 中从另一个同级或导入的组件更新同级组件的状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我最近刚开始学习 ReactJS 并一直在玩导入和导出功能，例如这是应用程序的结构，父文件和 2 个子文件的 3 个独立文件；如何将状态从 InputArea 导出到 DisplayArea?
父组件
import React, { Component } from 'react';从 './DisplayArea' 导入 DisplayArea；从 './InputArea' 导入 InputArea;类 App 扩展组件 {使成为() {返回 (<div id="wrapper" className="应用程序"><显示区域/><输入区域/>
);}}导出默认应用程序；
子 1 组件
import React, { Component } from 'react';从 './InputArea' 导入 InputArea;类 DisplayArea 扩展组件 {构造函数(道具){超级(道具)；}使成为() {返回 (<div className="列"><div className="col-body"><div id="preview">{ 如何在此处显示内容?}
);}}导出默认显示区域；
子 2 组件
import React, { Component } from 'react';类 InputArea 扩展组件 {构造函数(道具){超级(道具)；this.state = {内容: ''}this.handleChange = this.handleChange.bind(this);}句柄变化(e){e.preventDefault();this.setState({内容:e.target.value})}使成为() {返回 (<div className="列"><div className="col-body"><textarea id="editor" placeholder="在此处输入文本" onChange={this.handleChange}></textarea>
);}}导出默认输入区域；
解决方案
您需要在你的情况下提升你的状态.第二个选项是@Gavin Thomas 在评论中建议的.但是没有 Redux，你可以这样做:
const InputArea = (props) =>{const handleChange = (e) =>props.handleInputValue(e.target.value);返回 (<div className="列"><div className="col-body"><文本区域id="编辑器"placeholder="在此处输入文本"onChange={handleChange}></textarea>
);};const DisplayArea = (props) =>(<div className="列"><div className="col-body"><div id="preview">{props.inputValue}</div>
);类 App 扩展了 React.Component {状态 = {inputValue: "初始值",};handleInputValue = (inputValue) =>this.setState({ inputValue });使成为() {返回 (<div id="wrapper" className="应用程序"><DisplayArea inputValue={this.state.inputValue}/><InputArea handleInputValue={this.handleInputValue}/>
);}}ReactDOM.render(, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>
在这里，我们将输入值状态保存在父组件中，即 App.我们将回调函数传递给 InputArea 并使用此回调函数更改父组件的状态.然后我们将此状态传递给我们的 DisplayArea 组件.
Hi i just recently started learning ReactJS and been playing around the import and export functions, For example this is the structure of the app, 3 separate files the parent and 2 children; How do i export the state from InputArea to DisplayArea?
Parent Component
import React, { Component } from 'react';
import DisplayArea from './DisplayArea';
import InputArea from './InputArea';
class App extends Component {
render() {
return (
<div id="wrapper" className="App">
<DisplayArea />
<InputArea />
</div>
);
}
}
export default App;
Child 1 Component
import React, { Component } from 'react';
import InputArea from './InputArea';
class DisplayArea extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className="column">
<div className="col-body">
<div id="preview">{ How to display contents here? }</div>
</div>
</div>
);
}
}
export default DisplayArea;
Child 2 Component
import React, { Component } from 'react';
class InputArea extends Component {
constructor(props){
super(props);
this.state = {
content: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
e.preventDefault();
this.setState({
content: e.target.value
})
}
render() {
return (
<div className="column">
<div className="col-body">
<textarea id="editor" placeholder="Enter text here" onChange={this.handleChange}></textarea>
</div>
</div>
);
}
}
export default InputArea;
解决方案
You need to lift your state up in your situation. The second option is what @Gavin Thomas suggested in the comment. But without Redux you can do it like:
const InputArea = (props) => {
const handleChange = (e) => props.handleInputValue(e.target.value);
return (
<div className="column">
<div className="col-body">
<textarea
id="editor"
placeholder="Enter text here"
onChange={handleChange}
></textarea>
</div>
</div>
);
};
const DisplayArea = (props) => (
<div className="column">
<div className="col-body">
<div id="preview">{props.inputValue}</div>
</div>
</div>
);
class App extends React.Component {
state = {
inputValue: "Initial Value",
};
handleInputValue = (inputValue) => this.setState({ inputValue });
render() {
return (
<div id="wrapper" className="App">
<DisplayArea inputValue={this.state.inputValue} />
<InputArea handleInputValue={this.handleInputValue} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Here, we hold our input value state in the parent component, which is App. We pass a callback function to InputArea and change our parent component's state using this callback function. Then we pass this state to our DisplayArea component.
这篇关于如何在 REACT 中从另一个同级或导入的组件更新同级组件的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
