Question

我真的很奇怪。如果未通过验证，我需要更改输入值：

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

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

我得到的情况是我的输入更新，只是在下一次重新呈现之前被调用。 这是我的第一个问题 - 为什么？好的，经过一些研究后我发现了解决方案 - 添加键输入，如添加 -

<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}
        />
        );
 }

React只了解随机密钥？

1 个答案: