Как значение может перейти от элемента Child к сестре Element in React |JSX - PullRequest
Новая
       24

Как значение может перейти от элемента Child к сестре Element in React |JSX

2 голосов
/ 04 июня 2019

Я беру дату из выпадающего списка и пытаюсь использовать ее на другой странице, чтобы можно было сопоставлять время открытия, открытое для бронирований.Когда Datepicker выбирает дату, и значение Bps устанавливается на Btnsearch. Он пытается перенаправить, и похоже, что он выполняет повторную визуализацию, но значение prop не определено, а wasSubmit изменяется на true.Откуда мне взять эту опору?

Я добавил то, что считал маршрутизатором, я установил состояние с атрибутом 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

1 Ответ

1 голос
/ 04 июня 2019

Я не вижу функцию 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, если вы используете синтаксис жирной стрелки.
...