Javascript 反应-当用户每次单击屏幕上的任何位置时，更改元素文本的最佳方式是什么？

我已经开始学习React，在阅读了文档之后，我有一个问题

我想做以下工作：

我想将文本作为组件的一部分进行渲染。然后，当用户单击屏幕上的任何位置时，文本会发生变化，然后在第二次单击时再次发生变化，然后在第三次单击时再次发生变化，最后是第四次单击

我想知道在react中执行此操作的最佳实践是什么？我在考虑使用“onClick”方法，但那只允许两种状态

如果能在我的旅途中得到一些帮助，我将不胜感激

const welcome=欢迎使用我的应用程序1/4； ReactDOM.render 欢迎 document.getElementById'theapp' ; 学习ReactJS 您可以使用mousedown事件观察屏幕上任何位置的单击，如

class Welcome extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0,
        message: ["message1", "message2", "message3", "message4"]
      }
    }

    componentDidMount() {
        window.addEventListener('mousedown', this.pageClick.bind(this), false);
    }

    pageClick(e) {
        this.setState((prevState) => {
            if(prevState.count != this.state.message.length - 1)
                return { count: prevState.count + 1};
        });
    }

    render() {
        const { message, count } = this.state;
        return (
            <h1>Welcome to my app {message[count]}</h1>
        )
    }
}

ReactDOM.render(
  <Welcome/>, 
  document.getElementById("app")
);

您还可以使用mouseup和click事件。

您可以使用mousedown事件观察屏幕上任何位置的单击，如

class Welcome extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0,
        message: ["message1", "message2", "message3", "message4"]
      }
    }

    componentDidMount() {
        window.addEventListener('mousedown', this.pageClick.bind(this), false);
    }

    pageClick(e) {
        this.setState((prevState) => {
            if(prevState.count != this.state.message.length - 1)
                return { count: prevState.count + 1};
        });
    }

    render() {
        const { message, count } = this.state;
        return (
            <h1>Welcome to my app {message[count]}</h1>
        )
    }
}

ReactDOM.render(
  <Welcome/>, 
  document.getElementById("app")
);

---

您可以使用mouseup并单击事件。

因为您知道您只需要4条消息，所以创建一个包含它们的数组。然后，每次单击更新一个计数器，然后使用该计数器从数组中获取相关项

检查下面的演示

信息更改点击 此代码段有一个计数器/索引和一个数组，其中包含在初始状态下定义的要显示的消息。然后，我们将向h1元素添加一个eventlistener，以便在单击时触发。这样做会增加索引，只要索引不大于2，此时就没有更多的消息可显示

类MyApp扩展了React.Component{ 建造师{ 超级的 此.state={ 信息：[foo，bar，baz，qux]， 索引：0 }; this.incrementCounter=this.incrementCounter.bindthis； } 递增计数器{ 如果this.state.index>2返回； this.setStateprevState=>{index:prevState.index+1}； } 渲染{ 返回{this.state.messages[this.state.index]} } } ReactDOM.render、document.getElementByIdapp；

---

因为你知道你想要4条消息，所以创建一个包含它们的数组。然后，每次单击更新一个计数器，然后使用该计数器从数组中获取相关项

检查下面的演示

信息更改点击 此代码段有一个计数器/索引和一个数组，其中包含在初始状态下定义的要显示的消息。然后，我们将向h1元素添加一个eventlistener，以便在单击时触发。这样做会增加索引，只要索引不大于2，此时就没有更多的消息可显示

类MyApp扩展了React.Component{ 建造师{ 超级的 此.state={ 信息：[foo，bar，baz，qux]， 索引：0 }; this.incrementCounter=this.incrementCounter.bindthis； } 递增计数器{ 如果this.state.index>2返回； this.setStateprevState=>{index:prevState.index+1}； } 渲染{ 返回{this.state.messages[this.state.index]} } } ReactDOM.render、document.getElementByIdapp；

---

您可以将文本放入如下数组：

 const data = ['one', 'two', 'three'];

而不是每次用户单击时，将状态i增加1

import React from 'react';

const data = ['one', 'two', 'three']

class App extends React.Component {
   constructor(props){
    super(props);
      this.state = {
        name: 'hello',
        i : 0
      }
   }
   click(){
       // if it's the last element of array than it will start from 0 index again
       if(data[this.state.i] == undefined){
          this.setState({i : 0})
       }
       setTimeout(function() { this.setState({name: data[this.state.i], i : this.state.i + 1 }); }.bind(this), 50);
       // incrementing counter by 1 everytime user clicks

   }
   render() {

      return (
         <div>
             <div>
               <span>{this.state.name}</span>
               <button onClick={this.click.bind(this)}>Click</button>
             </div>

         </div>
      );
   }
}

export default App;

---

您可以将文本放入如下数组：

 const data = ['one', 'two', 'three'];

而不是每次用户单击时，将状态i增加1

import React from 'react';

const data = ['one', 'two', 'three']

class App extends React.Component {
   constructor(props){
    super(props);
      this.state = {
        name: 'hello',
        i : 0
      }
   }
   click(){
       // if it's the last element of array than it will start from 0 index again
       if(data[this.state.i] == undefined){
          this.setState({i : 0})
       }
       setTimeout(function() { this.setState({name: data[this.state.i], i : this.state.i + 1 }); }.bind(this), 50);
       // incrementing counter by 1 everytime user clicks

   }
   render() {

      return (
         <div>
             <div>
               <span>{this.state.name}</span>
               <button onClick={this.click.bind(this)}>Click</button>
             </div>

         </div>
      );
   }
}

export default App;

---

为什么不将计数器保持在该状态并在每次单击时更新它呢。因此，您将有点击次数的跟踪。OnClick将更新您的文本和计数器。感谢Vivek的建议，我将研究如何实现您的想法：为什么不在该州保留一个计数器，并在每次单击时更新它。因此，您将有点击次数的跟踪。OnClick将更新您的文本以及您的计数器。谢谢您的建议Vivek，我将考虑实施您的想法：谢谢您的建议！：谢谢你的建议！：嗨，克里斯，谢谢你的回答！我想这可能很灵活，如果我想在数组中添加/删除消息，那么我只需要确保更新侦听器，以便根据我有多少消息来增加或减少索引。不，如果要从数组中添加/删除消息，请将条件更改为this.state.index>this.state.index.length-2。这样更灵活。谢谢克里斯，谢谢你的帮助。嘿，克里斯，谢谢你的回答！我想这可能很灵活，如果我想在数组中添加/删除消息，那么我只需要确保更新侦听器，以便根据我有多少消息来增加或减少索引。不，如果要从数组中添加/删除消息，请将条件更改为this.state.index>this.state.index.length-2。这样更灵活。谢谢克里斯，谢谢你在这方面的帮助。