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进行反应（您可以像输入一样设置值）。您需要在用户更改文本时更新值（使用onChange（）事件）。

我制作了JS fiddle here with your original code，你可以看到你甚至无法更新输入中的值。要使其更新，您需要使用onChange event like this JS fiddle替换onBlur事件。希望有所帮助！

Answer 2

如此处所述（https://facebook.github.io/react/docs/forms.html#controlled-components），

受控制具有价值道具。渲染受控制将反映价值道具的价值。

用户输入对渲染元素没有影响，因为React已将值声明为Hello！。要更新响应用户输入的值，可以使用onChange事件

您需要将onBlur更改为onChange，或使用defaultValue代替value。例如

<input defaultValue={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} />

Answer 3

您需要在输入值时立即更改状态变量的值，因为如果您不更改输入值，那么您将提供输入，然后输入将不会显示更新的值。为此，您需要在任何地方使用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>

单击事件后清除输入文本

3 个答案: