Как визуализировать метод из дескриптора отправки компонента с состоянием

Question

Я пытаюсь перенаправить страницу при отправке на DatePicker, проблема в том, что я получил неожиданный токен ";"

Я испробовал предложения от пользователей и React Docs, а также документов Datepicker. Вот откуда я сейчас иду В JSX Как перенаправить на Handlesubmit из 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() {
    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;