单击事件后清除输入文本

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 and you can see you can't even update the value in the input. In order to get it to update you need to replace the onBlur event with an onChange event like this JS fiddle。希望对您有所帮助！

Answer 2

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

A controlled has a value prop. Rendering a controlled will reflect the value of the value prop.

User input will have no effect on the rendered element because React has declared the value to be Hello!. To update the value in response to user input, you could use the onChange event

您需要将 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>

单击事件后清除输入文本

Clear input text after click event

reactjs

react-jsx