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

我正在尝试重定向datepicker submit上的页面，问题是我得到了预期的意外令牌“

我尝试了来自用户和React文档以及Datepicker文档的建议，这就是我现在的来源，但是当应用到我的代码时，我得到了错误

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

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

/src/components/Toolbar/SearchCard/Datepicker/Datepicker.jsx
第42行：分析错误：意外标记，应为“；”
40 |   }
41 |州={}；
>42 | render（）{
|            ^
43 |返回(
44 |       
45 |         

这是全部文件

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;

从“React”导入React；
导入“/Datepicker.css”；
导入“/BTN搜索/BTN搜索”；
//react插件用于创建datetimepicker
从“react datetime”导入react datetime；
//反应带组件
进口{
FormGroup，
InputGroupAddon，
输入组文本，
输入组，
上校，
一行
}从“反应带”；
从“/BTN搜索/BTN搜索”导入BTN搜索；
类Datepicker扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit=事件=>{
event.preventDefault（）；
this.setState（{wassmitted:true}）；
}
render（）{
const{value，wassmitted}=this.state；
如果（已提交）{
返回
}否则{
返回//…您的正常组件
}
}
}
状态={}；
render（）{
返回(
);
}
}
导出默认日期选择器；

---

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

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

但是，您可以尝试设置它，因为您正在构造函数中定义

state

，所以不需要第41行（

state={}；

）

aka 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 (

render（）{
const{value，wassmitted}=this.state；
如果（已提交）{
返回
}否则{
返回//…您的正常组件
}
}
}
状态={}；
render（）{
返回(

这应该行得通

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;

从“React”导入React；
从'react router dom'导入{Redirect}；
导入“/Datepicker.css”；
导入“/BTN搜索/BTN搜索”；
//react插件用于创建datetimepicker
从“react datetime”导入react datetime；
//反应带组件
进口{
FormGroup，
InputGroupAddon，
输入组文本，
输入组，
上校，
一行
}从“反应带”；
从“/BTN搜索/BTN搜索”导入BTN搜索；
类Datepicker扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
//this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit=事件=>{
event.preventDefault（）；
this.setState（{wassmitted:true}）；
}
render（）{
const{value，wassmitted}=this.state；
如果（已提交）{
返回
}否则{
返回(
);
}
}
}
导出默认日期选择器；

这是干什么用的？

state={}

删除这一行..它不应该在那里我自己也不太确定，我会删除它，看看它是否有任何影响。删除它没有帮助，我以为这是为了声明状态以便能够将变量传递给它。请编辑您的答案，以包括使这项工作正常的内容。作为一个完整的文件，以便我可以运行它，并更好地管理它请把它人格化，我无法理解当所有的答案都在迷走神经中时该怎么做才能更快地获得贡献点。并不是说你在寻找分数。只是这么多迷走神经answers@DeployedDDOS不确定这其中有什么含糊不清的地方。您的代码引发了一个异常。该异常位于您在cl上定义属性的特定行ass内联。这意味着你的绑定器不处理这种语法。所以不要这样分配类的属性。我不知道你在用什么来构建代码，我应该如何解释如何使其工作呢？我不认为你实际上是在解决这里问到的问题，而把重点放在以前版本中运行过的东西上这听起来像你需要

import

Redirect…我猜react router dom？

import{Redirect}来自“react router dom”

Ok，所以我会帮助你自己找到它。调用

.bind

的地方在哪里？看看调用了什么，然后看看哪些东西没有定义