Question

这里我在Login组件中定义了一个onSubmit函数。在index.js文件中，我尝试通过传递onSubmit函数作为prop来呈现Login组件，index.js有自己的内部handleSubmit方法，它实际上调用了onSubmit方法。

index.js

 import React from 'react';
    import ReactDom from 'react-dom';
    import Login from './testApp/login.js';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
            function Greeting() {
        return <h1>ffgdf</h1>
    }
        handleSubmit(data) {
            console.log("++++data++++++++");
            console.log(data);
            console.log("++++data++++++++");
    }
    ReactDom.render((
       <Router>
       <div>
        <Route exact path="/" onSubmit={this.handleSubmit}  component={Login}/>
        {/* add the routes here */}
        <Route path="/test" component={Greeting}/>
        </div>
      </Router>
    ), document.getElementById('root'))

login.js

import React from 'react';
import '../style/styles.css';
import { Link } from "react-router-dom";
import * as ReactBootstrap from 'react-bootstrap';
export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            uname:'',
            password:'',
            error:{}
        };
        this.handleInput=this.handleInput.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }
    handleInput(e) {
        this.setState({[e.target.name]:e.target.value})
        console.log(typeof this.state.uname);
    }
    formValidation() {
        let formValid=true;
        let errors=this.state.error;
        if(!(this.state.uname.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))) {
            errors["email"]="Enter a valid email id";
            formValid=false;
        }

        if(formValid) {
            this.setState({error:{}});
        }
        else {
            this.setState({error:errors});
        }
        return formValid;
    }
    handleSubmit(e) {
        e.preventDefault();
        if(this.formValidation()) {
            alert("form submitted");
            this.props.onSubmit(this.state);
        }
        else
        {
            alert("form has errors");
        }

    }
    render() {
        return (
            <div className="body">
                <ReactBootstrap.Form horizontal onSubmit={this.handleSubmit}>

                    <ReactBootstrap.FormGroup style={{paddingBottom:8}}>
                        <ReactBootstrap.Col sm={6} smOffset={3}>
                            <ReactBootstrap.FormControl 
                                type="text" name="uname" placeholder="email"  value={this.state.uname} onChange={this.handleInput}
                            />
                        </ReactBootstrap.Col>   
                            <span style={{color:"red",position:'absolute',top:35,left:180}}>{this.state.error["email"]}</span>
                    </ReactBootstrap.FormGroup>

                    <ReactBootstrap.FormGroup style={{paddingBottom:8}}>
                        <ReactBootstrap.Col sm={6} smOffset={3}>
                            <ReactBootstrap.FormControl 
                                type="password" name="password" placeholder="password"  value={this.state.password} onChange={this.handleInput}
                            />
                        </ReactBootstrap.Col>   
                        <span style={{color:"red",position:'absolute',top:35,left:180}}>{this.state.error["password"]}</span>
                    </ReactBootstrap.FormGroup>

                    <ReactBootstrap.FormGroup>
                        <ReactBootstrap.Col sm={6} smOffset={3}>
                            <ReactBootstrap.Row>
                                <ReactBootstrap.Col sm={3}>
                                    <ReactBootstrap.Button bsStyle="primary" type="submit" disabled={!(this.state.uname.length!='' && this.state.password.length!=''  )}>
                                        Submit
                                    </ReactBootstrap.Button>
                                </ReactBootstrap.Col>   
                                <ReactBootstrap.Col sm={3}>
                                    <Link to="/test">
                                        <ReactBootstrap.Button bsStyle="primary"  >
                                            SignUp
                                        </ReactBootstrap.Button>
                                    </Link> 
                                </ReactBootstrap.Col>   
                            </ReactBootstrap.Row>   
                        </ReactBootstrap.Col>   
                    </ReactBootstrap.FormGroup>

                </ReactBootstrap.Form>

            </div>
        )
    }
}

但它显示以下错误

./src/index.js
Syntax error: Unexpected token, expected ; (8:20)

   6 |  return <h1>ffgdf</h1>
   7 | }
>  8 |  handleSubmit(data) {
     |                     ^
   9 |      console.log("++++data++++++++");
  10 |      console.log(data);
  11 |      console.log("++++data++++++++");

我不知道这里的问题是什么。任何人都可以帮我解决这个问题

Answer 1

handleSubmit不属于某个类，因此您必须将其指定为function并调用handleSubmit而不是this.handleSubmit，或者您可以将代码转换为ReactDOM.render到一个类，同样在传递道具时，使用渲染道具。

查看Passing custom props to router component in react-router v4了解详情

class App extends React.Component {
   handleSubmit(data) {
            console.log("++++data++++++++");
            console.log(data);
            console.log("++++data++++++++");
     } 
   render() {
    return (
         <Router>
           <div>
            <Route exact path="/" render={(props) => <Login onSubmit={this.handleSubmit} {...props}/>}/>
            {/* add the routes here */}
            <Route path="/test" component={Greeting}/>
            </div>
          </Router>
      )
   }
}

ReactDom.render(<App/>, document.getElementById('root'))

props不会被reactjs中的组件中的路由传递

1 个答案: