react 输入框输入异常

需求：

• 使用react 做一个输入框
• 输入的内容要延时更新到server，延时大概是500ms，更新了之后会同步结果到输入框
• 同时会有另外一个地方也会更新输入框的内容，而且必须是实时的

进程：

• 通常使用的方案，input 里加入 onChange 方法，并设置input 的value 的值

  <input value={this.state.value} onChange={e => this.setState({value: e.target.value})}/>

• 异常，在输入的时候因为是延时更新到server 等server 返回结果到这边的时候value 会覆盖已有的输入，当输入都速度快一些的时候数据会异常
• 修改输入方案，使用defaultValue 

  <input defaultValue={this.state.value} onChange={e => this.setState({value: e.target.value})}/>

• 异常，正常的输入没有任何问题，但是在另一个地方需要做实时同步的时候无法做到实时同步，因为defaultValue 只有在初始化的时候会生效
• 突然想到一个方案，以上两种行为都只能满足整个功能的一半，那我为什么不做两个输入框，在正常输入的时候展示defaultValue 的输入框，在另一边同步的时候展示value 的输入框，并且在展示完之后吧 value 的值同步 到 defaultValue 的输入框

  <Input style={{display: !this.state.reallyInputBlue ? "none" : ''}}
      value={formatText(leftText, !isActive)}
      onFocus={(e) => {
          this.setState({reallyInputBlue: false});
          this.reallyInput.focus(); 
          this.reallyInput.state.value = e.target.value;
      }}
  />
  
  <Input
      style={{display: this.state.reallyInputBlue ? "none" : ''}}
      ref={ref => this.reallyInput = ref}
      defaultValue={formatText(leftText, !isActive)}
      onChange={(e) => this.props.updateResult(idx, e.target.value)}
      onClick={(e) => {e.stopPropagation();e.preventDefault()}}
      onBlur={() => {this.setState({reallyInputBlue: true});}}
  />

• 成功，通过这个想到另一个方案，既然可以通过两个input 来做实现，那不就也可以通过使用 state 来解决，在正常手写的时候使用 value, 但是要建一个新的state来监听这个值的变化，然后延时更新同步过来的时候不更新这个state， 在外部其他地方更新过来的时候更新这个state

  <input value={this.state.valueNew} onChange={e => this.setState({valueNew: e.target.value})}/>
  
  componentDidUpdate(prevProps, prevState) {
      if (state.needUpdate){
          this.setState({valueNew: state.value, needUpdate: false})
      }
  }

• 精简成功