Question

当用户输入无效日期时，我正在尝试重置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属性相同，但是没有效果。验证可以正常进行，并且可以正常工作，但是在输入字段文本上的重新呈现却没有。

Answer 1

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

似乎无法在React中重置组件状态

1 个答案: