您好,我最近才开始学习 ReactJS 并一直在研究导入和导出功能,例如,这是应用程序的结构,3 个单独的父文件和 2 个子文件;如何将状态从 InputArea 导出到 DisplayArea?
父组件
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;
子组件 1
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;
子 2 组件
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;
最佳答案
您需要lift your state up在你的情况下。第二个选项是@Gavin Thomas 在评论中建议的。但是如果没有 Redux,你可以这样做:
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>
在这里,我们将输入值状态保存在父组件 App 中。我们将回调函数传递给 InputArea 并使用此回调函数更改父组件的状态。然后我们将这个状态传递给我们的 DisplayArea 组件。
关于javascript - 如何从 REACT 中的另一个兄弟或导入组件更新兄弟组件的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51433337/