Question

我正在尝试重定向有关datepicker提交的页面，问题是我得到了预期的意外令牌“;”

我尝试了来自用户，React Docs和Datepicker Docs的建议，这就是我现在来自In JSX How to redirect on Handlesubmit from DataPicker?的地方，但是当应用于我的代码时，我得到了错误

./src/components/Toolbar/SearchCard/Datepicker/Datepicker.jsx
  Line 42:  Parsing error: Unexpected token, expected ";"

  40 |   }
  41 |   state = {};
> 42 |   render() {
     |            ^
  43 |     return (
  44 |       <>
  45 |         <FormGroup>

这是整个文件

import React from "react";
import "./Datepicker.css";
import "./Btnsearch/Btnsearch";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";

// reactstrap components
import {
  FormGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  Col,
  Row
} from "reactstrap";
import Btnsearch from "./Btnsearch/Btnsearch";
class Datepicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit = event => {
    event.preventDefault();
    this.setState({wasSubmitted: true});
}

render() {
    const { value, wasSubmitted } = this.state;

    if (wasSubmitted) {
        return <Redirect to='/Bookingpage' />
    } else {
        return //... your normal component
    }
}
  }
  state = {};
  render() {
    return (
      <>
        <FormGroup>
          <InputGroup className="input-group-alternative">
            <InputGroupAddon addonType="prepend">
              <InputGroupText
              >
                <i className="ni ni-calendar-grid-58" />
              </InputGroupText>
            </InputGroupAddon>
            <ReactDatetime
            value={this.state.value}
            onChange={this.handleChange}
            inputProps={{
              placeholder: "Date Picker Here"
            }}
            timeFormat={false}
            />
          </InputGroup>
        </FormGroup>
        <form onSubmit={this.handleSubmit}>
        <Btnsearch  type="submit" value={this.state.value}/>
        </form>
      </>
    );
  }
}

export default Datepicker;

我希望该应用程序呈现hanndleSubmit并重定向到新页面

Answer 1

您的例外是因为您的解析器/捆绑程序无法处理该类上的内联属性。

您可以尝试进行设置，但是因为您在构造函数中定义了state，所以不需要第41行（state = {};）。

在这里将状态分配给类实例

constructor(props) {
  super(props);
  this.state = {
    value: ""
  };
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

除此之外，这看起来像是复制粘贴代码的问题在此类中，您具有两个不匹配的大括号的render方法。如您所见

render() {
    const { value, wasSubmitted } = this.state;

    if (wasSubmitted) {
        return <Redirect to='/Bookingpage' />
    } else {
        return //... your normal component
    }
}
  }
  state = {};
  render() {
    return (

这应该有效

import React from "react";
import { Redirect } from 'react-router-dom';
import "./Datepicker.css";
import "./Btnsearch/Btnsearch";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";

// reactstrap components
import {
  FormGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  Col,
  Row
} from "reactstrap";
import Btnsearch from "./Btnsearch/Btnsearch";
class Datepicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    // this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit = event => {
    event.preventDefault();
    this.setState({wasSubmitted: true});
}

render() {
    const { value, wasSubmitted } = this.state;

    if (wasSubmitted) {
        return <Redirect to='/Bookingpage' />
    } else {
      return (
        <>
          <FormGroup>
            <InputGroup className="input-group-alternative">
              <InputGroupAddon addonType="prepend">
                <InputGroupText
                >
                  <i className="ni ni-calendar-grid-58" />
                </InputGroupText>
              </InputGroupAddon>
              <ReactDatetime
              value={this.state.value}
              onChange={this.handleChange}
              inputProps={{
                placeholder: "Date Picker Here"
              }}
              timeFormat={false}
              />
            </InputGroup>
          </FormGroup>
          <form onSubmit={this.handleSubmit}>
          <Btnsearch  type="submit" value={this.state.value}/>
          </form>
        </>
      );
    }
  }
}

export default Datepicker;

如何从有状态组件的句柄提交中呈现方法

1 个答案: