将状态值从组件传递到组件？

Question

我在这个网站、官方文档和许多其他地方看到了很多答案。但我无法取得成果。这就是我发布这个问题的原因。

所以，我的问题是我有 3 个文件名为： App.js、SignUp.js 和 Welcome.js。

我的任务是从 SignUp.js 页面获取表单中的值并将该值打印到 Welcome.js 组件。我阅读了有关提升状态和更高阶组件的信息，但无法做到。

感谢任何帮助。

这是我的代码：

App.js：

import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';
class App extends Component {
  render(){
    var homeMessage = () =>{
      return(<div><SignUp /></div>);
    }
    return(
    <Router>
      <div>
        <Route exact path="/src/Welcome" component={Welcome}/>
        <Route exact path="/" component={homeMessage}/>
      </div>
    </Router>
    );
  }
}
export default App;

SignUp.js;

import React,{Component} from "react";
import {Link} from "react-router-dom";
export default class SignUp extends Component {
  constructor(props){
    super(props);

    this.state = {
      firstName:''
    };
  }
  inputData = event =>
  {
    this.setState({
      [event.target.name]:event.target.value
    });
  }
  submitData = event =>
  {
    event.preventDefault();
  }
  render(){
    return(
      <div>
        <form onSubmit={this.submitData}>
          <input type="text" name="firstName" onChange={this.inputData}/>
          <button type="submit"> Submit</button>
        </form>
        <Link to="/src/Welcome">Welcome</Link>
      </div>
    );
  }
}

Welcome.js：

    import React,{Component} from "react";
    import SignUp from './SignUp';
    export default class Welcome extends Component {
      render(){
        return(
          <div>
            {this.state.firstName}
          </div>
        );
      }
    }

“如果可能的话，请给出答案，然后仅以反应方式而不是 redux 或任何其他库。因为根据 Dan Abramov 文章“Thinking in React”，所以首先我想尝试所有范围仅在反应中可用。”

Answer 1

将数据从SignUp 组件传回父组件，然后将其作为道具传递给 Welcome 组件。另一种方式是将 SignUp 组件状态存储在App 组件中，这样提交时就不需要再传回来了。

App.js

import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
import Welcome from './Welcome';


class App extends Component {
  state = {
     firstName: ''
  }
  onSignIn = (value) => {
      this.setState({firstName: value});
  }
  render(){

    return(
    <Router>
      <div>
        <Route exact path="/src/Welcome" render={(props) => <Welcome firstName={this.state.firstName} {...props}/>}/>
        <Route exact path="/" render={(props) =>{
   return(<div><SignUp onSignIn={this.onSignIn} {...props} /></div>);
}}/>
      </div>
    </Router>
    );
  }
}
export default App;

SignUp.js

export default class SignUp extends Component {
  constructor(props){
    super(props);

    this.state = {
      firstName:''
    };
  }
  inputData = event =>
  {
    this.setState({
      [event.target.name]:event.target.value
    });
  }
  submitData = event =>
  {
    event.preventDefault();
    this.props.onSignIn(this.state.firstName);
  }
  render(){
    return(
      <div>
        <form onSubmit={this.submitData}>
          <input type="text" name="firstName" onChange={this.inputData}/>
          <button type="submit"> Submit</button>
        </form>
        <Link to="/src/Welcome">Welcome</Link>
      </div>
    );
  }
}

Welcome.js

import React,{Component} from "react";
import SignUp from './SignUp';
export default class Welcome extends Component {
  render(){
    return(
      <div>
        {this.props.firstName}
      </div>
    );
  }
}

一些有用的链接：

How to pass data from child component to its parent in ReactJS?

Passing custom props to router component in react-router v4

ReactJS - Lifting state up vs keeping a local state