加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 点击事件后清除输入文本

发布时间:2020-12-15 20:12:48 所属栏目:百科 来源:网络整理
导读:我遇到的问题是第一次输入文本后,然后单击“添加”,输入文本框将被清除.但是,当我再次开始输入文本时,输入文本将不允许我输入除第一个字母之外的任何文本.我不确定为什么会这样做. var FormTextBox = React.createClass({ handleOnBlur: function (e) { this
我遇到的问题是第一次输入文本后,然后单击“添加”,输入文本框将被清除.但是,当我再次开始输入文本时,输入文本将不允许我输入除第一个字母之外的任何文本.我不确定为什么会这样做.

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>
        )
    }
});

解决方法

我很惊讶这甚至是第一次工作.随着 controlled components的反应(你设置的价值就像你的输入一样).您需要在用户更改文本时更新值(使用onChange()事件).

我做了一个JS fiddle here with your original code,你可以看到你甚至无法更新输入中的值.为了让它更新,你需要用onChange event like this JS fiddle替换onBlur事件.希望有所帮助!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读