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 方法），我想知道它在您更改密钥之前是否有效。我尝试了两种方法，但没有奏效。正如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}
        />
        );
 }