javascript - 在JSX中，如何从DatePicker进行Handlesubmit重定向？

我正在将选择的日期传递给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上一次成功运行
检查components文件夹和工具栏是否有与问题直接相关的文件
https://react-dnudvg.stackblitz.io/
请注意，这里有代码，但没有构建应用程序。

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

最佳答案

看起来这里的问题是将应呈现的逻辑与可以在事件处理程序方法中使用的逻辑混淆。在第一个示例中，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
        }
    }
}

关于javascript - 在JSX中，如何从DatePicker进行Handlesubmit重定向？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56381473/