Maison > Article > interface Web > Explication détaillée de l'utilisation des formulaires dans React
Cette fois, je vais vous apporter une explication détaillée de l'utilisation des formulaires dans React. Quelles sont les précautions lors de l'utilisation des formulaires dans React. Voici des cas pratiques, jetons un coup d'œil.
React est un framework de flux de données unidirectionnel, donc les éléments du formulaire sont différents des autres éléments DOM, et le fonctionnement est également très différent du framework de liaison bidirectionnelle. Je vais donc en parler séparément ici.
import React from 'react' import ReactDOM from 'react-dom' class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'Hello React' } } render(){ return ( <p> <p><label>写死value-锁定状态</label><input type="text" value="hello react"/></p> <p><label>动态value-锁定状态</label><input type="text" value={this.state.text}/></p> <p><label>不指定value-没锁状态</label><input type="text"/></p> </p> ) } } ReactDOM.render(<Component1 />, document.getElementById('p1'));
Ce cas illustre que dans React, les éléments de formulaire ne peuvent pas être modifiés à nouveau une fois la valeur donnée en raison d'un flux de données unidirectionnel, vous devez donc coopérer avec onChange<a href="http://www.php.cn/wiki/1464.html" target="_blank">onChange</a>
à terminer. Le cas ci-dessus devrait donc ressembler à ceci
class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'Hello React' } } change = (e) => { this.setState({text: e.target.value}) } render(){ return ( <p> <p><label>写死value-锁定状态</label><input type="text" value="hello react" onChange={this.change}/></p> <p><label>动态value-没锁状态</label><input type="text" value={this.state.text} onChange={this.change}/></p> <p><label>不指定value-没锁状态</label><input type="text"/></p> </p> ) } }
Aperçu de l'effet
En HTML ordinaire, l'élément textarea
est la valeur du texte du nœud
<textarea> Hello there, this is some text in a text area </textarea>
Mais dans React, cet élément doit utiliser l'attribut value
.
class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'Hello React' } } change = (e) => { this.setState({text: e.target.value}) } render(){ return ( <p> <textarea value={this.state.text} onChange={this.change}/> </p> ) } }
En HTML ordinaire, si l'élément select
veut spécifier la valeur sélectionnée par défaut, vous devez ajouter l'attribut option
selected
au
<select> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option selected value="coconut">Coconut</option> <option value="mango">Mango</option> </select>Mais dans React, il vous suffit de donner l'attribut
à value
class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'lime' } } change = (e) => { this.setState({text: e.target.value}) } render(){ return ( <p> <select value={this.state.text} onChange={this.change}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select> </p> ) } }élément du fichier d'entrée Parce que
est un élément spécial, il est en lecture seule, vous devez donc utiliser <input type="file">
pour un traitement spécial dans React ref
class Component1 extends React.Component{ submit = (e) => { console.log(this.file.files) } render(){ return ( <p> <input type='file' ref={input => {this.file = input}}/> <input type="button" value="submit" onClick={this.submit} /> </p> ) } }Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois ! Lecture recommandée :
Explication détaillée des étapes pour sélectionner la mise en évidence de li dans React
Analyse des cas d'utilisation JSON et Math en JS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!