如何使用已有的组件将子组件的状态传递给父组件？

1. 在父组件中创建一个接收状态的函数。

addState = (childState) => {
  this.setState({ childState });
}

2. 在子组件中引入父组件，并将接收状态的函数传递给子组件。

import React from 'react';
import ParentComponent from './ParentComponent';

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      childState: 'Hello, world!'
    }
  }
  
  handleChange = (event) => {
    this.setState({ childState: event.target.value });
    this.props.addState(event.target.value);
  }
  
  render() {
    return (
      <div>
        <input type="text" value={this.state.childState} onChange={this.handleChange} />
      </div>
    );
  }
}

export default ChildComponent;

3. 在父组件中调用子组件，并将接收状态的函数作为属性传递给子组件。

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      childState: ''
    }
  }
  
  addState = (childState) => {
    this.setState({ childState });
  }
  
  render() {
    return (
      <div>
        <ChildComponent addState={this.addState} />
        <p>Child state: {this.state.childState}</p>
      </div>
    );
  }
}

export default ParentComponent;

4. 父组件就能够访问子组件的状态了，可以将其渲染出来。