ReactJS - multiline textarea
Je suis en train de créer des multi-ligne de champ de saisie de texte avec ReactJS. J'ai créé ce composant:
var TextInput = React.createClass({
getInitialState: function(){
return {currentValue: this.props.children}
},
handleChange: function(event){
//handler
},
render: function(){
return (
<textarea name="body"
onChange={this.handleChange}
value={this.state.currentValue}/>
)
}
});
Je suis rendu à elle de cette façon:
# jinja2 template
React.render(
<TextInput>{{ post.body }}</TextInput>,
document.getElementById('post-editing')
);
Le problème: Si {{ post.body }}
est quelque chose comme #Title \n text
, le textarea l'afficher dans une seule ligne. Je vois #Title text
dans mon textarea sans saut de ligne. Quelle est la bonne façon de définir <textarea>
valeur avec ReactJS?
OriginalL'auteur Ilya Boltnev | 2015-01-09
Vous devez vous connecter pour publier un commentaire.
Vous définissez la valeur de la
<textarea>
le bon chemin, par l'intermédiaire de lavalue
attribut, le problème est que la chaîne que vous obtenez la valeur dethis.props.children
est en fait pas ce que vous pensez.Avec une valeur d'entrée de
"#Title \n text"
dans votre<TextInput>
composant, la valeur dethis.props.children
est en fait"#Title \\n text"
(remarquez la double barre oblique inverse), vous devez faire quelque chose comme ce qui suit correctement la sortie du caractère de saut de ligne:this.state.currentValue.split('\\n').join('\n');
semble être plus approprié. Aussi, il doit avoir d'inversion de remplacer\n
=>\\n
sur le serveurOriginalL'auteur Dominic Santos
Si vous indiquez votre valeur d'entrée via
value
attribut puis il textarea sera rendu avec cette valeur sur chaque rerender. Au lieu de cela, vous devez utiliserdefaultValue
, si j'ai bien compris.Aussi, je tiens à mentionner que, dans de Réagir, à l'aide de
props
dansgetInitialState
est antipattern, mais cela est une autre question .. et expliqué dans la documentation officielle.OriginalL'auteur ColCh