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>
        );
      }
    }

＆＃34;如果可能的话，请给出答案，然后以反应方式回答，而不是redux或任何其他库。因为根据丹·阿布拉莫夫的文章＆＃34;思考反应＆＃34;所以首先我要尝试所有只有反应的范围。＆＃34;

Answer 1

将数据从SignUp组件传回父级，然后将其作为prop传递给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

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

1 个答案: