В JSX Как перенаправить на Handlesubmit из DataPicker?

Question

Я передаю выбранную дату на this.state.value Получение отметки времени полуночи в тот день, но я не могу заставить ее отобразить новую страницу, чтобы я мог создать страницу бронирования.Где он берет отметку времени и проверяет доступное время в этот день.Когда я вернул Handlesubmit после половины успешного повторного рендеринга, я получил белую страницу и вернулся на главную страницу приложения с пустой датой, чтобы выбрать снова.

Я пытался создать это как функциональный компонент в handleSubmit, но также пытался вернуть компонент из handleSubmit.

Вот последняя неудачная попытка компиляции и последняя успешная компиляция

 handleSubmit(event) {
    render(
      {
      const {bookingTime} = this.state.value;
      if (bookingTime) {
        return <Redirect to='/Bookingpage' />;   
        }
      }
    event.preventDefault();
  }

Эта ошибка произошла из-за действия, подобного https://github.com/salsita/redux-form-actions/issues/2#issuecomment-318774722

Хотя это половинакод успешного запуска (просто пустая белая страница в течение примерно 1 с)

handleSubmit(event) {
    return <h1>{this.state.value}</h1>;
    event.preventDefault();
  }

Это последний успешный запуск StackBlitz. Проверьте папку компонентов и панель инструментов на наличие файлов, непосредственно связанных с проблемой https://react-dnudvg.stackblitz.io/ Обратите внимание, что код существует, но приложение не создается.

Я ожидал, что для этого прогона будет отображена новая страница с одним <h1>{this.state.value}</h1>, как определено средством выбора даты

Answer 1

Похоже, проблема в том, что здесь смешивается логика, которая должна быть визуализирована с логикой, которая может использоваться в методе обработчика событий. В первом примере render не является допустимым методом, который можно вызывать из handleSubmit, а во втором примере handleSubmit не должен возвращать компоненты для визуализации.

Вы можете получить желаемую функциональность, создав переменную состояния, которая указывает, отправил ли пользователь еще. Затем вы можете проверить эту переменную при рендеринге (обратите внимание, что рендеринг - это часть return функционального компонента или метод render компонента с состоянием.

Например:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null, // for the date picker
            wasSubmitted: false,
        }
    }

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

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

        if (wasSubmitted) {
            return <Redirect to='/Bookingpage' />
        } else {
            return //... your normal component
        }
    }
}