Question

我必须创建一个评论应用程序。我创建了一个登录页面，在其中输入名称，然后单击“提交”按钮以移动到另一个页面，我必须在其中进行一些评论。我想使用在登录页面上输入的名称以及我的注释在注释页面中使用。我想知道如何在单击“提交”按钮时将输入名称发送到其他组件，并在“注释”页面上使用该名称。

我的登录页面是：

 import React, { Component } from 'react';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import AppBar from 'material-ui/AppBar';
 import RaisedButton from 'material-ui/RaisedButton';
 import TextField from 'material-ui/TextField';
 import CommentForm from './CommentForm';

 class LoginForm extends Component {
   state={
     username:''
    }

    handleClick = e =>{
      console.log('username',this.state.username);
      this.props.history.push('/main');
     }

    render() {
      return (
       <div className='text-center'>
         <MuiThemeProvider>
           <div>
             <AppBar title="Login"/>
             <TextField
                hintText="Enter your Name"
                floatingLabelText="Name"
                value={this.state.username}
                onChange = {(e) => this.setState({username: 
                e.target.value})}
                 />
                <br/> <br/>
              <RaisedButton label="Submit" primary={true} style={style} 
              onClick={this.handleClick}/>
           </div>
         </MuiThemeProvider>
        </div>
        );
       }
      }

   const style = {
   margin: 15,
    };

   export default LoginForm;

Answer 1

有两种方法可以做到这一点，但是如果您不想再下载任何库，那将是最简单的。

您似乎已经在使用react-router-dom，所以您要做的就是像这样修改/main的现有路线。

<Route path="/main/:name" component={whateveryourcomponentis}/>

我们所做的是在该路由的末尾添加通配符，以便您可以传递数据。

然后在事件处理程序中只需传递this.state.username

handleClick = e =>{
  this.props.history.push(`/main/${this.state.username}`);
 }

现在，在您导航到的组件中，您可以通过调用来访问用户名

this.props.match.params.name

.name是您传递的通配符。

Answer 2

在这里您可以使用

this.props.history.push('/main', {  username:this.state.username }))

或

for (var i = 0; i < tableData1.length; i++) {
    itemsQuantiry1[i] = tableData1[i].Quantity;

    // your remaining code here.
  }

有关rouet.push（），请阅读以下内容
在导航到的页面上，当前位置将被注入到其路线匹配的组件中，因此您可以使用this.props.location.state来访问状态。

要记住的一件事是，如果用户直接导航到页面，则不会有任何状态，因此，当数据不存在时，您仍然需要某种机制来加载数据。

如何将输入值从表单发送到另一个组件？

2 个答案: