react 输入框输入异常

需求：

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

进程：

通常使用的方案，input 里加入 onChange 方法，并设置input 的value 的值
```
 this.setState({value: e.target.value})}/>
```
异常，在输入的时候因为是延时更新到server 等server 返回结果到这边的时候value 会覆盖已有的输入，当输入都速度快一些的时候数据会异常

修改输入方案，使用defaultValue

 this.setState({value: e.target.value})}/>

异常，正常的输入没有任何问题，但是在另一个地方需要做实时同步的时候无法做到实时同步，因为defaultValue 只有在初始化的时候会生效

突然想到一个方案，以上两种行为都只能满足整个功能的一半，那我为什么不做两个输入框，在正常输入的时候展示defaultValue 的输入框，在另一边同步的时候展示value 的输入框，并且在展示完之后吧 value 的值同步到 defaultValue 的输入框

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

{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
```
 this.setState({valueNew: e.target.value})}/>

componentDidUpdate(prevProps, prevState) {
    if (state.needUpdate){
        this.setState({valueNew: state.value, needUpdate: false})
    }
}
```
精简成功

react 输入框输入异常

Java相关栏目本月热门文章