Réagir.js: Désactiver le bouton lorsque l'entrée est vide
Je suis nouveau pour réagir.js, désolé si la question semble trop stupide pour vous.
J'essaie de désactiver un bouton lorsqu'un champ de saisie est vide. Quelle est l'approche beest dans React pour cela?
Je fais quelque chose comme ce qui suit:
<input ref="email"/>
<button disabled={!this.refs.email}>Let me in</button>
Est-ce correct?
Ce n'est pas seulement la duplication de l'attribut dynamique, car je suis également curieux de transférer/vérifier les données d'un élément à un autre.
2 réponses
Vous devrez conserver la valeur actuelle de l'entrée dans l'état (ou transmettre les modifications de sa valeur à un parent via une fonction de rappel, ou sideways, ou
Exemple utilisant l'état:
<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";
var App = React.createClass({
getInitialState() {
return {email: ''}
},
handleChange(e) {
this.setState({email: e.target.value})
},
render() {
return <div>
<input name="email" value={this.state.email} onChange={this.handleChange}/>
<button type="button" disabled={!this.state.email}>Button</button>
</div>
}
})
React.render(<App/>, document.getElementById('app'))
}()</script>L'utilisation de constantes permet de combiner plusieurs champs pour la vérification:
class LoginFrm extends React.Component {
constructor() {
super();
this.state = {
email: '',
password: '',
};
}
handleEmailChange = (evt) => {
this.setState({ email: evt.target.value });
}
handlePasswordChange = (evt) => {
this.setState({ password: evt.target.value });
}
handleSubmit = () => {
const { email, password } = this.state;
alert(`Welcome ${email} password: ${password}`);
}
render() {
const { email, password } = this.state;
const enabled =
email.length > 0 &&
password.length > 0;
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Email"
value={this.state.email}
onChange={this.handleEmailChange}
/>
<input
type="password"
placeholder="Password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
<button disabled={!enabled}>Login</button>
</form>
)
}
}
ReactDOM.render(<LoginFrm />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
</body>