Question

我正在从下拉日期选择器中获取一个日期，并尝试在另一个页面中使用它，以便我可以交叉参考预订的开放时间。当Datepicker选择一个日期，并且在Btnsearch上设置了props值时，它会尝试重定向，并且看起来确实会重新呈现，但是当wasSubmit更改为true时，prop值未定义。我从哪里拉这个道具？

我已经添加了我认为是路由器的东西，我用属性this.state.value设置了状态，但这似乎无法解决问题。

这是我的日期选择器，Btnsearch，预订页面

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

// 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 <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;

import '../Datepicker';

class Btnsearch extends React.Component {
    render() {
        return (
        <button onClick={() => console.log(this.props.value)} className="btn btn-success search-card-btn">Search</button>
    );
    }
};

export default Btnsearch;

import '../Datepicker';
class Bookingpage extends React.Component {
    render() {
        return(
            <div className="bookingPage">
            <h1>{this.props.value}</h1>
            </div>
        );
    }
}

export default Bookingpage;

当选择日期并点击搜索btn时，我希望它重定向到显示所选值的页面Bookingpage。实际结果是

    <div class="App">
        <div class="card freesearch-option">
            <label><span class="searchTitleTxt">Search For Availability</span>
                <div class="bookingPage">
                    <h1></h1></div>
            </label>
        </div>
    </div>

State
value:
""

wasSubmitted: true

完整的项目在这里https://react-puh2oq.stackblitz.io

Answer 1

我没有看到handleChange函数。

因此，似乎您是在选择日期，而不是.setState()在this.state.value中。

            <ReactDatetime
              value={this.state.value}
// HERE YOU CALL IT, BUT handleChange DOESN'T EXIST.
              onChange={this.handleChange} 
              inputProps={{
                placeholder: "Date Picker Here"
              }}
              timeFormat={false}
             />

嗯，适当的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 {
.
.
.

只要使用胖箭头语法，就不必.bind（）既不需要此函数也不必handleSubmit。

在React中，值如何从Child元素变为姊妹元素？ JSX

1 个答案: