IT技术 - 在 JSX 中如何从 DataPicker 重定向 Handlesubmit？ - 吾爱随笔录

在 JSX 中如何从 DataPicker 重定向 Handlesubmit？

IT技术 javascript reactjs jsx

2021-05-04 08:04:42

我将选择的日期传递给那天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>包含日期选择器定义的页面

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

其它你可能感兴趣的问题

上一篇未处理的Promise拒绝警告：下一篇react-router本机将链接的组件呈现在前一个之上