代码之家 › 专栏 › 技术社区 › Alexander Tsepkov

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

react-datepicker reactjs javascript

Alexander Tsepkov · 技术社区 · 6 年前

当用户在日期选择器中输入无效的日期/m值时,用户将做出反应。代码如下:

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 但它没有效果。验证正在按预期启动并正常工作,但对输入字段文本的重新呈现不是这样。