单击事件后清除输入文本
我遇到的问题是在第一次输入文本后，我单击Add，输入文本框就会被清除。但是，当我再次开始在中输入文本时，输入的文本将不允许我输入除第一个字母以外的任何文本。我不知道它为什么要这么做。
var FormTextBox = React.createClass({
handleOnBlur: function (e) {
this.props.onBlur(e.target.value);
},
render: function () {
return (
<input value={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} />
)
}
});
var TestFormTextBox = React.createClass({
getInitialState: function (e) {
return {
value: ''
}
},
handleOnAdd: function (e) {
this.setState({ value: '' });
},
handleTextInfo: function (value) {
this.setState({ value: value });
},
render: function () {
return (
<div>
<table>
<tbody>
<tr>
<td>Details</td>
<td></td>
</tr>
<tr>
<td><FormTextBox value={this.state.value} fid={1} onBlur={this.handleTextInfo} /></td>
<td><button onClick={this.handleOnAdd}>Add</button></td>
</tr>
</tbody>
</table>
</div>
)
}
});回答 3
Stack Overflow用户
发布于 2016-07-21 11:39:38
令我惊讶的是，这在第一次就能奏效。在react中使用controlled components (在其中，您可以像设置输入一样设置值)。每当用户更改文本时(使用onChange()事件)，您都需要更新值。
我创建了一个JS fiddle here with your original code，您可以看到您甚至不能更新输入中的值。为了让它更新，您需要用onChange event like this JS fiddle替换onBlur事件。希望这能有所帮助！
Stack Overflow用户
发布于 2016-07-21 12:21:32
正如这里提到的(https://facebook.github.io/react/docs/forms.html#controlled-components)，
控件有一个值属性。呈现控件将反映值prop的值。
用户输入将不会对呈现的元素产生任何影响，因为React已将值声明为Hello！。要更新该值以响应用户输入，可以使用onChange事件
您需要将onBlur更改为onChange，或者使用defaultValue代替value。例如：
<input defaultValue={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} />Stack Overflow用户
发布于 2016-07-21 13:38:47
您需要在输入输入值时立即更改状态变量的值，因为这就是您为输入提供的值。如果您不更改它，那么输入将不会显示更新后的值。为了做到这一点，您需要在任何地方使用onChange事件。
var FormTextBox = React.createClass({
handleOnChange: function (e) {
this.props.onChange(e.target.value);
},
render: function () {
return (
<input value={this.props.value} key={this.props.fid} type="text" onChange={this.handleOnChange} />
)
}
});
var TestFormTextBox = React.createClass({
getInitialState: function (e) {
return {
value: ''
}
},
handleOnAdd: function (e) {
this.setState({ value: '' });
},
handleTextInfo: function (value) {
this.setState({ value: value });
},
render: function () {
return (
<div>
<table>
<tbody>
<tr>
<td>Details</td>
<td></td>
</tr>
<tr>
<td><FormTextBox value={this.state.value} fid={1} onChange={this.handleTextInfo} /></td>
<td><button onClick={this.handleOnAdd}>Add</button></td>
</tr>
</tbody>
</table>
</div>
)
}
});
ReactDOM.render(<TestFormTextBox />, document.getElementById('app'));<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<div id="app"></div>
https://stackoverflow.com/questions/38494359
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号