web-dev-qa-db-fra.com

React input onChange ne se déclenchera pas

J'ai actuellement cette application de réaction simple et je ne peux pas déclencher ces événements de changement pour la vie de moi.

var BlogForm = React.createClass({
getInitialState: function() {
    return {
        title: '',
        content: ''
    };
},
changeTitle: function(event) {

    var text = event.target.value;

    console.log(text);

    this.setState({
        title: event.target.value
    });
},
changeContent: function(event) {
    this.setState({
        content: event.target.value
     });
},
addBlog: function(ev) {
    console.log("hit hit");
},
render: function() {
    return (
                <form onSubmit={this.addBlog(this)}>
                    <div>
                        <label htmlFor='picure'>Picture</label>
                        <div><input type='file' id='picture' value={this.state.picture} /></div>
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.title} onChange={this.changeTitle} placeholder='Title' />
                    </div>
                    <div>
                        <input className="form-control" type='text' id='content' value={this.state.content} onChange={this.changeContent} placeholder='Content' />
                    </div>
                    <div>
                        <button className="btn btn-default">Add Blog</button>
                    </div>
                </form>

    );
  }
});

C'est drôle quand j'utilise onChange={this.changeTitle (this)}, l'événement se déclenche mais la variable ev dans la fonction changeTitle n'est pas la bonne.

javascriptreactjsreact-jsx
11
Cekaleek

Essayer:

onChange={(evt) => this.changeTitle(evt)}

ou:

onChange={this.changeTitle.bind(this)}

au lieu de:

onChange={this.changeTitle}
12
Samuli Hakoniemi

essayez de déplacer le onChange à la div parent .. cela a fonctionné pour moi

3
Chris

La réponse acceptée est correcte, MAIS je voulais ajouter que, si vous implémentez la solution de bouton de groupe radio comme indiqué dans la documentation d'amorçage , assurez-vous de supprimer l'option "data-toggle" sur l'environnement div:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
</div>

Si vous conservez l'option de basculement des données comme indiqué dans le code ci-dessus, les événements onClick et onChange que vous avez ajoutés vous-même au champ de saisie seront ignorés.

0
Jenever