web-dev-qa-db-fra.com

Effacer le texte saisi après l'événement de clic

Le problème que j'ai est après avoir saisi le texte pour la première fois, je clique ensuite sur Ajouter et la zone de texte de saisie est effacée. Cependant, lorsque je recommence à saisir du texte, celui-ci ne me permet pas de saisir du texte en dehors de la première lettre. Je ne sais pas pourquoi il fait ça.

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>
        )
    }
});
reactjsreact-jsx
5
fes

Je suis surpris que cela fonctionne même la première fois. Avec les composants contrôlés in réagissent (ceux où vous définissez la valeur comme vous le faites avec votre entrée). vous devez mettre à jour la valeur chaque fois que l'utilisateur modifie le texte (avec l'événement onChange ()).

J'ai fait un JS violon ici avec votre code original et vous pouvez voir que vous ne pouvez même pas mettre à jour la valeur dans l'entrée. Afin de le mettre à jour, vous devez remplacer l'événement onBlur par un événement onChange tel que celui-ci JS fiddle . J'espère que cela pourra aider!

4
Dr. Nitpick

Comme mentionné ici ( https://facebook.github.io/react/docs/forms.html#controlled-components ),

Un contrôlé a une valeur prop. Le rendu d'une commande contrôlée reflète la valeur de la valeur prop.

L'entrée utilisateur n'aura aucun effet sur l'élément rendu, car React a déclaré que la valeur était Hello !. Pour mettre à jour la valeur en réponse à la saisie de l'utilisateur, vous pouvez utiliser l'événement onChange.

Vous devez changer onBlur en onChange ou utiliser defaultValue au lieu de value. par exemple.

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

Vous devez modifier la valeur de la variable d'état dès que vous tapez la valeur d'entrée, car c'est ce que vous fournissez en entrée. Si vous ne la modifiez pas, l'entrée ne montrera pas la valeur mise à jour. Pour ce faire, vous devez utiliser l'événement onChange partout.

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>
1
Shubham Khatri