在JSX中，如何从DataPicker进行Handlesubmit重定向? [英] In JSX How to redirect on Handlesubmit from DataPicker?

问题描述

我正在将选择的日期传递给this.state.value获取当天的午夜时间戳记，但是我似乎无法获得它来呈现新页面，因此可以构建预订页面.时间戳记在哪里并检查当天的可用时间.当我在一次成功的重新提交后确实返回了Handlesubmit时，我得到了一个白色页面，并返回到主应用程序页面，并带有空白日期以再次选择.

I am passing the date picked to the this.state.value Getting a time stamp of Midnight that day, but I can not seem to get it to render a new page so I can build the booking page. Where it takes the time stamp and checks for available times that day. When I did return the Handlesubmit on a half successful rerender I got a white page and back to the main app page with a blank date to choose again.

我尝试将其构建为handleSubmit中的功能组件，但是还尝试从handleSubmit返回组件.

I have tried to build this as a functional component in the handleSubmit But also tried to return a component from the handleSubmit.

这是最后一次失败的编译尝试，也是最后一次成功的编译

Here is the last failed to compile attempt and the last successful compile

 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

This fail was from doing something similar to https://github.com/salsita/redux-form-actions/issues/2#issuecomment-318774722

这是成功运行代码的一半(仅空白页面大约1秒钟)

While this is the half successful runs code (Just a White Blank page for about 1s)

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

这是StackBlitz上一次成功运行 检查components文件夹和工具栏是否有与问题直接相关的文件 https://react-dnudvg.stackblitz.io/ 请注意，这里有代码，但没有构建应用程序.

This is the last Successful run on StackBlitz Check the components folder for and tool bar for files directly related to problem https://react-dnudvg.stackblitz.io/ Please note the code is there but its not building the app.

我希望这次运行可以用日期选择器定义的一个<h1>{this.state.value}</h1>渲染一个新页面

I expected for this run render a new page with one <h1>{this.state.value}</h1> as defined by the date picker

推荐答案

看起来这里的问题是将应该呈现的逻辑与可以在事件处理程序方法中使用的逻辑混淆.在您的第一个示例中，render不是可以从handleSubmit内部调用的有效方法，在您的第二个示例中，handleSubmit不应返回要渲染的组件.

It looks like the issue here is mixing up logic that should be rendered with logic that can go in an event handler method. In your first example, render is not a valid method that can be called from within handleSubmit, and in your second example, handleSubmit should not return components to be rendered.

您可以通过创建一个状态变量来获得所需的功能，该状态变量指示用户是否已提交.然后，您可以在渲染时检查该变量(请注意，渲染是功能组件的return部分或有状态组件的render方法.

You can get at your desired functionality by creating a state variable that indicates whether the user has submitted yet. Then you can check that variable when rendering (note that rendering is the return part of a functional component or the render method of a stateful component.

例如:

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
        }
    }
}

这篇关于在JSX中，如何从DataPicker进行Handlesubmit重定向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！