Reactjs. Comment masquer les résultats sur le bouton et le clic sur la page
Je sais que cette question peut sembler élémentaire, mais je suis juste désespérée. Le code Reactjs suivant affiche l'enregistrement des utilisateurs.
C'est ce que je veux atteindre.
comment utiliser reactjs pour masquer les résultats lorsque :
1.) l'utilisateur clique n'importe où sur la page.
2.) lorsqu'un utilisateur a un bouton Masquer.
Quelqu'un peut-il m'aider avec ça. Merci
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>
<label id="rootsearch"></label>
<script type="text/babel">
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { data : []}
}
componentDidMount() {
this.setState({
data: [{"id":"1","firstName":"john ","lastName":"Markatti"},
{"id":"2","firstName":"luke","lastName":"henry"}]
});
}
render() {
return (
<span>
<h2>
How to Hide Result when a user clicks on the Page or on the Hide button
</h2>
<ul>
<button className="btn btn-primary">Hide Result</button><br />
{this.state.data.map((person, i) => (
<li key={i}>
{person.lastName} - {person.firstName}
</li>
))}
</ul>
</span>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('rootsearch')
);
</script>
<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>
</html>
Une mise à jour
Pour masquer les résultats lorsqu'un utilisateur clique sur un bouton, j'ai essayé le code ci-dessous mais j'obtiens un jeton d'erreur inattendu
getInitialState: function() {
return { data: false };
},
onClick: function() {
this.setState({ data: true });
},
In the render method I have this
<button onClick={this.onClick}>Hide Result</button><br />
C'est ainsi que j'ai pu résoudre le problème de masquage et d'affichage du résultat. Dans l'état dans le constructeur, j'ai défini la variable d'affichage sur true selon le code ci-dessous
this.state = { data : [], showing: true }.
Dans la fonction Render, j'ai défini cette variable d'affichage sur State.
const { showing } = this.state;
Dans la méthode de retour, j'implémente le bouton Masquer et afficher le résultat selon le code ci-dessous
<button onClick={() => this.setState({ showing: !showing })}>Hide</button>
Enfin, j'attache la variable d'affichage à la méthode de carte pour masquer et afficher les résultats respectivement
{showing && this.state.data.map((person, i) => (
<li key={i}>
{person.lastName} - {person.firstName}
</li>
))}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots