web-dev-qa-db-fra.com

En cliquant sur texte, comment changer le texte cliqué en un autre texte dans React.js

Je suis nouveau dans React.js et je n’ai trouvé aucune réponse à cette question. 

J'ai un blog pour les commentaires, et lorsque je clique sur le titre d'un commentaire, celui-ci doit être remplacé par un autre texte. Comment je ferais ça?

 comment and title

reactjstext
5
Feruza

Vous pouvez utiliser la fonction onClick et stocker votre titre dans une variable d'état.

Voici un exemple :

class Title extends Component {
   constructor() {
      super();
      this.state() {
         title: "Click here"
      }
   }

   changeTitle = () => {
      this.setState({ title: "New title" });
   };

   render() {
       return <h1 onClick={this.changeTitle}>{this.state.title}</h1>;
   }
}

Vous trouverez d'autres exemples ici: Manipulation d'événements - React

7
Valentin Duboscq

Soit vous pouvez stocker le texte dans la variable state et le onClick du texte, mettre à jour la valeur state, ou conserver une variable bool dans state si le texte a été cliqué ou non, si oui, affichez le premier texte, sinon autrement, 

Essayez ceci en stockant le texte dans state:

class App extends React.Component{
  constructor(){
     super();
     this.state= {title: 'Click text'}
  }
  
  render(){
     return <div onClick= {() => this.setState({title:'New text'})}>{this.state.title}</div>
  } 
}

ReactDOM.render(<App/>, document.getElementById('app'))
<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>

<div id='app'/>

Essayez ceci en utilisant une variable bool dans state:

class App extends React.Component{
      constructor(){
         super();
         this.state= {clicked: true}
      }
      
      render(){
         return <div onClick= {() => this.setState({clicked: !this.state.clicked})}>
         {
            this.state.clicked? 'First Text' : 'Second Text'
         }
         <br/>
         * click on text to toggle
         </div>
      } 
    }

ReactDOM.render(<App/>, document.getElementById('app'))
<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>

<div id='app'/>

2
Bhavya Sinha

N'hésitez pas à copier tout ce qui est à moi ci-dessous, qui est une source complètement testée (qui contient tout, par exemple, le defaultProps ):

import React, {Component} from 'react';

export default class InterchangeableText extends Component {
   constructor(props) {
      super(props);
      this.state = {
         title: this.props.defaultText
      }
      this.changeTitle = this.changeTitle.bind(this);
   }

   changeTitle() {
      this.setState({ 
          title: this.props.changedText
      });
   }

   render() {
       return <div onClick={this.changeTitle}>{this.state.title}</div>;
   }

}

InterchangeableText.defaultProps = {
    defaultText: 'defaultText',
    changedText: 'changedText'
}

Ensuite, dans un autre composant où vous rendrez le composant ci-dessus, veuillez ajouter:

// ...
render() {
    return <InterchangeableText defaultText="some default text" changedText="text changed!"/>
}
0
thinhvo0108