React + webpack 开发单页面应用简明中文文档教程（九）子组件给父组件传值

import React, { Component } from 'react'
import Son from '@/coms/son'
export default class Father extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: null
    }
  }

  componentDidMount () {}
  render () {
    let { name } = this.state
    return (
      <div>
        <p>
          {name ?  `您的姓名是：${name}` : '您还没有输入姓名'}
        </p>
        <Son getName={r => this.setState({name: r})}></Son>
      </div>
    )
  }
}

import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

import SiteIndex from '@/page/site/index'
import SiteDetails from '@/page/site/details'
import OtherFather from '@/page/other/father'

export default class App extends Component {
  render () {
    return (
      <Router basename="/">
        <Switch>
          <Route exact path='/' component={SiteIndex} />
          <Route exact path='/details/:id' component={SiteDetails} />
          <Route exact path='/father' component={OtherFather} />
        </Switch>
      </Router>
    )
  }
}

import React, { Component } from 'react'
export default class Son extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: null
    }
  }

  componentDidMount () {}
  render () {
    return (
      <div>
        <input ref='name' type='text'
          onChange={el => this.props.getName(el.target.value)}
        />
      </div>
    )
  }
}