单击事件后清除输入文本

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

令我惊讶的是，这甚至在第一次就有效。在反应中使用受控组件（您可以像输入一样设置值）。每当用户更改文本（使用 onChange() 事件）时，您都需要更新该值。

我用你的原始代码在这里做了一个 JS 小提琴，你可以看到你甚至无法更新输入中的值。为了使其更新，您需要将 onBlur 事件替换为onChange 事件，例如 JS fiddle。希望有帮助！