Accentuer et différer le setState de React sur l'entrée onChange

Question

Je suis en train de créer un petit utilitaire où j'ai besoin d'appeler une setState reporté au prochain tick déclenché par l'entrée onChange manipulateur. Ci-dessous, un simple extrait montrant le concept de base.

https://jsfiddle.net/samuelsimoes/q3p44sz1/

class MyComponent extends React.Component {
  constructor () {
    super(...arguments);
    this.state = {};
  }

  onChange (value) {
    setTimeout(v => {
      this.setState({ name: v });
    }.bind(this, value), 0);
  }

  render () {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={evt => this.onChange(evt.target.value)} />
      </div>
    );
  }
};

ReactDOM.render(
  <MyComponent/>,
  document.getElementById("app-container")
);

Si vous exécutez cet extrait dans un navigateur sous Mac OS et que vous essayez de taper une lettre avec un accent, vous obtiendrez un comportement bizarre, différent pour chaque navigateur. Sur Chrome l'accent ne fonctionne que la première fois, après l'accent n'est plus appliqué (regardez le gif ci-dessous). Sur Firefox, l'accent et la lettre n'apparaissent pas.

Vous avez une idée de ce que c'est ?

p.s. : J'ai testé ce comportement sur React 0.13, 0.14 et 15.0.2.

Answer 1

Fondamentalement, vous ne devriez pas différer le setState . React ne fonctionnera pas correctement dans cette situation.

Regardez : https://github.com/facebook/react/issues/6563

Ce qui se passe :

Supposons que vous appuyez sur la lettre A .

1. Lorsque vous déclenchez le onChange sur le terrain, React traite toutes les mutations d'état.

2. Après le processus de mutation d'état, React fait le DOM diff pour mettre à jour le composant et à ce stade la valeur d'état pour ce champ est une valeur vide, donc React fait un node.value = "" .

3. Au prochain tic, notre différé setState est déclenché en appliquant la lettre A avec le node.value = "A" .

Ce comportement casse les navigateurs sur MacOS où ils remplacent l'accent sur "l'état intermédiaire" par un accent dactylographié empêchant l'utilisateur de taper le caractère accentué.

Donc, malheureusement, il n'y a pas de solution.