如何在两个组件之间传递值？

Question

I have 2 separate components, Form component is the step 1 where you enter your name, then by clicking <Link /> you go to the next step which is Welcome component.

How can I pass the name value {this.state.value} from Form component to Welcome component so it can retrieve what was typed in the Form component.

Form component:

import React from 'react';
import Link from 'react-router';

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''      
    };      
  }

  render() {
    return (
      <div className='root'>
        <p>Setup the engine analysation presentation to demo incubation functionality.</p>
        <div className='fieldRow'>
          Name
          <input type="text" autoFocus value={this.state.value} placeholder='Enter Name...'  />
        </div>
        <div className='btnWrapper'>
          <Link to='/welcome' >Access Demo</Link>
        </div>
      </div>
    );
  }
}

export default Form

Welcome component:

import React from 'react';

class Welcome extends React.Component {
  render() {
    return (
      <div className='root'>
        Welcome <!-- Name Input from Form component -->
      </div>
    );
  }
}

export default Welcome;

Answer 1

You can pass it as state like this

<Link to={{
 pathname: '/welcome',
 state: {
  name: this.state.value
 }
}}>Access Demo</Link>

Then get it on welcome page (component) using withRouter

const { location } = this.props;
const name = location && location.state && location.state.name;