React.js提交评论后输入框未按预期清空问题求助
问题根源
输入框未完成受控组件的绑定逻辑:已经通过onChange事件将输入内容同步到this.state.value,但没有将输入框的value属性与this.state.value关联,因此state.value被置空时,输入框视图无法同步更新。
修复方案
在Feed.js的input标签中补充value属性绑定即可,修改后的代码如下:
<input onKeyPress={this.addCommEnter} onChange={this.getValue} value={this.state.value} // 新增该行绑定逻辑 className="user-input" type="text" placeholder="Add Comment..." />
原理说明
React受控组件要求输入值始终与对应state保持同步,需要同时满足两个要求:
- 绑定
value属性到对应state字段 - 通过
onChange事件监听输入变化,同步更新对应state字段
内容的提问来源于stack exchange,提问作者jjw
相关产品推荐
相关产品推荐

