javascript - React 只理解随机键？

Question

我遇到了非常奇怪的情况。如果未通过验证，我需要更改输入值:

if (!isValid) {
  //if invalid set previous value
  this.timeInput.value = previous value;
}

我正在使用masked input ，但与普通输入行为完全相同。

我发现我的输入更新了，就在调用下一次重新渲染之前。 这是我的第一个问题 - 为什么？ 好吧，经过一番研究，我找到了解决方案 - 将键添加到输入，正如所说的添加 -

<input key={Math.random()}/>

它的工作!但最奇怪的是，当我尝试将值从随机更改为我的 id 属性时，类似于 -

key={Number(this.props.id)}

它不起作用!为什么？唯一的区别是我的 id 是整数(例如 3 )，但是 Math.random返回类似 0.21421214124 的内容。

组件:

handleTimeBoxBlur = (e) => {
    const newTime = convertToSeconds(e.target.value)
    //if nothing was changed
    if (newTime === this.props.slide.seconds) {
      return;
    }

    const isValid = this.props.checkValidation(this.props.slide.id, newTime)
    if (!isValid) {
       //if invalid set previous value
       this.timeInput.value = formatSS(this.props.slide.seconds);
       setTimeout(() => this.setState({isValid : true}), 6000) //remove field highlighting after 8 seconds
    }

    this.setState({isValid : isValid})
 }

 render() {
    <input 
      key={Math.random()}  
      styleName={inputStyleName}
      onBlur={this.handleTimeBoxBlur}
      ref={ref => this.timeInput = ref} 
      defaultValue={formatSS(this.props.slide.seconds)} />
 }

Answer 1

发生这种情况是因为您正在使用 uncontrolled input component (TL；DR，你没有任何 onChange 方法)，我想知道它在你更改 key 之前是否有效。我尝试了两种方法，但都没有成功。正如所述here ，您需要使用受控组件来获得预期的行为。

尝试这样的事情:

  constructor(props) {
    super(props)
    this.state = {
      isValid: false,
      textValue: props.slide.seconds
    }

    this.handleTimeBoxBlur = this.handleTimeBoxBlur.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({ textValue: e.target.value })
  }

  handleTimeBoxBlur(e) {
    const newTime = this.state.textValue
    //if nothing was changed
    if (newTime === this.props.slide.seconds) {
      return;
    }

    const isValid = this.props.checkValidation(this.props.slide.id, newTime)

    if (!isValid) {
       //if invalid set previous value
       this.setState({textValue: this.props.slide.seconds});
       setTimeout(() => this.setState({isValid : true}), 6000) //remove field highlighting after 8 seconds
    }

    this.setState({isValid : isValid})
  }

   render() {
    return (
      <MaskedInput 
        key={this.props.slide.id}  
        mask={'11a'}
        onBlur={this.handleTimeBoxBlur} 
        value={this.state.textValue} 
        onChange={this.handleChange}
        />
        );
 }