Question

当我处理更改时，甚至在处理提交之前。我收到一个值未定义的错误，当我对其进行更改时，我得到的handlechange未定义。

我尝试用几种不同的方式定义handlechange，我将展示我似乎前进的两种方式。但是仍然出现错误。

这使我进入了未定义的值

 handleSubmit = event => {
    event.preventDefault();
    this.setState({wasSubmitted: true});
}

handleChange = e => {
    e.preventDefault();
    this.setState({ value: e.target.value });
}


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

    if (wasSubmitted) {
        return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></Bookingpage>
    } else {

这没有定义handleChange并且是整个脚本

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

// 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 = handleChange;
    this.handleSubmit = handleSubmit;

  }


  handleSubmit = e => {
    event.preventDefault();
    this.setState({wasSubmitted: true});
}

handleChange = e => {
    event.preventDefault();
    this.setState({ value: e.target.value });
}

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

    if (wasSubmitted) {
        return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></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;

我希望将价值支持结转到<Bookingpage />

Answer 1

在第一个中，您必须预设babel以这种方式绑定。 https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

在第二个中，您在构造函数中的绑定语法错误。应该是this.handleChange = this.handleChange.bind(this);

如果在react-Datetimepicker上选择了该值，如何定义该值

1 个答案: