在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组件之间就能够实现双向通信

reactjs 中有 2 个组件 A B B 组件中有一个textarea。A 组件中的按钮点击之后能够在 B 组件中追加内容 B 组件也可以自己编辑内容。

原文地址: https://www.cveoy.top/t/topic/hQT2 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录