Reactjs 反应内部组件'；s状态更改don'；t平滑

我试图用状态控制输入

但是我遇到了一个问题，就是当我敲击键盘时，输入会失去焦点

见下图：

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.onBchange=this.onBchange.bind（this）；
}
状态={
a:是的，
b:“，
c:“
};
onBchange（e）{
const this class=此；
返回（异步函数（）{
等待thisClass.setState（{b:e.target.value}）；
console.log（thisClass.state.b）；
})();
}
onCchange=e=>{
this.setState（{c:e.target.value}）；
};
render（）{
//这导致问题的原因是什么？
常量测试=（{b，c，onBchange，onCchange}）=>(
B:
C:
);
返回(
{this.state.a&&(
)}
);
}
}

请让我知道，如果你需要更多关于这方面的信息

---

有什么想法吗？

您的应用程序在每次更改时都会重新对这些元素进行排序，因为每次击键都会将新的道具传递给应用程序渲染方法中的

请注意，将render中的返回方法更改为此将停止此问题：

 <div className="App">
        <span>B: </span>
        <input value={this.state.b} onChange={this.onBchange} />
        <span>C: </span>
        <input value={this.state.c} onChange={this.onCchange} />
        {/* {this.state.a && (
          <Test
            b={this.state.b}
            c={this.state.c}
            onBchange={this.onBchange}
            onCchange={this.onCchange}
          />
        )} */}
      </div>

B:
C:
{/*{this.state.a&&(
)} */}