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

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