reactjs - 单击事件后清除输入文本

Question

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

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

Answer 1

令我惊讶的是，这甚至第一次就起作用了。与controlled components在 react 中(您可以像输入一样设置值)。每当用户更改文本(使用 onChange() 事件)时，您都需要更新该值。

我做了一个JS fiddle here with your original code您可以看到您甚至无法更新输入中的值。为了使其更新，您需要将 onBlur 事件替换为 onChange event like this JS fiddle 。希望有帮助!