Question

我是React.js的新手，找不到这个问题的任何答案。

我有一个评论博客，当我点击评论的标题时，标题应该更改为另一个文本。我该怎么做？

Answer 1

您可以使用onClick功能并将标题存储在状态变量中。

以下是一个例子：

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>;
   }
}

您可以在此处找到更多示例：Handling Events - React

更新：您现在可以将Hooks与React 16.8一起使用

import React, { useState } from "react";

const Title = () => {
   const [title, setTitle] = useState("Click here");

   return <h1 onClick={() => setTitle("New title")}>{title}</h1>;
}

Answer 2

您可以将文本存储在state变量和onClick文本中，更新state值，或者在bool中保留state是否为文本单击是否已被点击，如果是，则显示第一个文本，否则为另一个，

通过将文字存储在state：

中来尝试此操作

＆＃13;

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'))

＆＃13;

<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'/>

＆＃13;

使用bool变量中的state来尝试此操作：

＆＃13;

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'))

＆＃13;

<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'/>

＆＃13;

Answer 3

请随意复制我下面的全部内容，这是一个经过完全测试的来源（包含所有内容，例如 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'
}

接下来，在渲染上述组件的另一个组件中，请添加：

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

通过单击文本如何将单击的文本更改为React.js中的另一个文本

3 个答案: