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

我遇到的问题是第一次输入文本后,然后单击“添加”,输入文本框将被清除.但是,当我再次开始输入文本时,输入文本将不允许我输入除第一个字母之外的任何文本.我不确定为什么会这样做.

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事件.希望有所帮助！