React 中如何从子元素到姊妹元素的值？JSX

Question

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

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

这是我的日期选择器、Btnsearch、Bookingpage

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>

        </>

      );

    }

  }

}

完整的项目在这里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 {...handleSubmit只要您使用粗箭头语法，您就不必 .bind() 或此函数。