React 中的值如何从 Child 元素传递到姐妹元素？ JSX

Question

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

我添加了我认为是路由器的东西，我用属性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时，我希望它将其重定向到页面预订，这些页面书籍表示所选值。实际结果是

    <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()ing 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。