1

当用户输入无效日期时，我正在尝试重置 react-datepicker 中的日期值/文本。这是代码：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: Date.now()
    };
  }

  render() {
    return (
      <DatePicker
        name="date"
        selected={this.state.date && moment(this.state.date, "x")}
        onChange={date => {
          this.setState({
            date: date.valueOf()
          });
        }}
        onBlur={e => {
          let date = moment(e.target.value, "LLL", true);
          if (date.isValid()) {
            this.setState({
              date: date.valueOf() // apply good value
            });
          } else {
            this.forceUpdate();
          }
        }}
        showTimeSelect
        timeFormat="HH:mm"
        timeIntervals={30}
        dateFormat="LLL"
        timeCaption="Time"
        minDate={moment().add(30, "minutes")}
      />
    );
  }
}

我试图将它放入 JSFiddle，但它似乎在渲染 react-datepicker 组件时遇到了问题，但是这个组件在我自己的代码中渲染得很好。

问题似乎forceUpdate是没有触发组件的重置。我想知道重置是否只发生在日历选择本身而不是输入字段（这是我想要做的）。我尝试添加value属性并将其设置为与属性相同的内容，selected但它没有效果。验证正在触发并按预期工作，但输入字段文本的重新呈现不是。

4

1 回答 1

0

如果状态未更改，则无需强制更新组件，并且如果状态更改，无论如何都会再次呈现视图。像这样强制更新不会导致渲染发生任何变化。通常在格式化日期时，我首先检查原始数据是否适合在日期中转换，然后我将其转换，我再也不需要检查它了。

于 2018-08-09T14:49:12.920 回答