[英]How to trigger sibling component function from another sibling component in React?
[英]How to update the state of a sibling component from another sibling or imported component in REACT
嗨,我最近才开始学习 ReactJS 并一直在玩导入和导出功能,例如这是应用程序的结构,父文件和 2 个子文件的 3 个单独文件; 如何将状态从 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;
你需要在你的情况下提升你的状态。 第二个选项是@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 组件。
以下是代码的相关部分。 基本上是将一个liftState
方法传递给InputArea
组件,它会在调用时实际更新App
的状态。 然后将content
作为道具传递给DisplayArea
。
class App extends Component {
constructor(props) {
super(props);
this.state = {
content: ""
};
}
liftState = state => {
this.setState(state);
}
render() {
return (
<div className="App">
<InputArea liftState={this.liftState}/>
<DisplayArea content={this.state.content}/>
</div>
);
}
}
class InputArea extends Component {
handleChange(event) {
this.props.liftState({content: event.target.value});
}
}
class DisplayArea extends Component {
render() {
return (
<div className="column">
<div className="col-body">
<div id="preview">{this.props.content}</div>
</div>
</div>
)
}
}
React.js 文档说(提升状态):
通常,多个组件需要反映相同的变化数据。 我们建议将共享状态提升到它们最近的共同祖先......
例子:
// Parent component which contains shared state
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
child1Value: 0,
child2Value: 0,
}
this.handleChild1Click = this.handleChild1Click.bind(this);
this.handleChild2Click = this.handleChild2Click.bind(this);
}
handleChild1Click(nextValue) {
this.setState({ child1Value: nextValue });
}
handleChild2Click(nextValue) {
this.setState({ child2Value: nextValue });
}
render() {
return (
<div>
<Child
value={this.state.child2Value}
onClick={this.handleChild1Click}
/>
<Child
value={this.state.child1Value}
onClick={this.handleChild2Click}
/>
</div>
)
}
}
class Child extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.onClick(this.props.value + 1);
}
render() {
return (
<div>
<p>Value of my sibling: {this.props.value}</p>
<button onClick={this.onClick}></button>
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.