reactjs 中有 2 个组件 A B B 组件中有一个textarea。A 组件中的按钮点击之后能够在 B 组件中追加内容 B 组件也可以自己编辑内容。
在React中,可以通过父组件传递props给子组件来实现组件之间的通信。为了实现在A组件中点击按钮追加内容到B组件中的textarea,可以将B组件的内容作为state保存在A组件中,然后通过props传递给B组件。B组件可以通过回调函数将编辑的内容传递给A组件并更新A组件的state,从而实现双向绑定。
以下是一个示例代码:
// A组件
class A extends React.Component {
constructor(props) {
super(props);
this.state = {
content: ''
};
this.handleClick = this.handleClick.bind(this);
this.handleContentChange = this.handleContentChange.bind(this);
}
handleClick() {
const { content } = this.state;
this.props.appendContent(content);
}
handleContentChange(event) {
this.setState({ content: event.target.value });
}
render() {
return (
<div>
<textarea value={this.state.content} onChange={this.handleContentChange} />
<button onClick={this.handleClick}>追加内容</button>
</div>
);
}
}
// B组件
class B extends React.Component {
constructor(props) {
super(props);
this.state = {
content: ''
};
this.handleContentChange = this.handleContentChange.bind(this);
}
handleContentChange(event) {
const content = event.target.value;
this.setState({ content });
this.props.onContentChange(content);
}
render() {
return (
<div>
<textarea value={this.state.content} onChange={this.handleContentChange} />
</div>
);
}
}
// 父组件
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
content: ''
};
this.appendContent = this.appendContent.bind(this);
this.handleContentChange = this.handleContentChange.bind(this);
}
appendContent(content) {
this.setState(prevState => ({
content: prevState.content + content
}));
}
handleContentChange(content) {
this.setState({ content });
}
render() {
return (
<div>
<A appendContent={this.appendContent} />
<B onContentChange={this.handleContentChange} />
</div>
);
}
}
ReactDOM.render(<Parent />, document.getElementById('root'));
在上述示例中,A组件中的按钮点击会调用appendContent方法,将A组件中的content追加到B组件中的textarea中。B组件中的内容变化会通过onContentChange回调函数传递给A组件,并更新A组件中的content状态。这样A组件和B组件之间就能够实现双向通信
原文地址: https://www.cveoy.top/t/topic/hQT2 著作权归作者所有。请勿转载和采集!