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

Question

我试图在 datepicker 提交时重定向一个页面，问题是我得到了意外的 token 预期“；”

我已经尝试了用户和 React 文档以及 Datepicker 文档的建议这就是我现在来自的地方 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

您的异常是因为您的解析器/ bundler 无法处理类的内联属性。

您可以尝试设置它，但是因为您正在定义 state在构造函数中，不需要第 41 行(state = {};)。

又名状态被分配给这里的类实例

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

除此之外，这看起来像是复制粘贴代码的问题您在此类中有两个带有不匹配大括号的渲染方法。正如你在这里看到的

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;