我已经开始学习 React，在阅读了文档之后，有一个问题..
我想做以下事情:
我想将文本呈现为组件的一部分。然后，当用户点击屏幕上的任意位置时，文本会发生变化，然后在第二次点击时再次改变，然后在第三次点击时再次改变，最后是第四次点击。
我想知道在 React 中执行此操作时的最佳实践是什么？我正在考虑使用“onClick”方法，但它只允许两种状态？
如果能在我的 React 之旅中提供帮助，我将不胜感激。
const welcome = <h1>Welcome to my app 1/4</h1>;
ReactDOM.render(
welcome,
document.getElementById('theapp')
);<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/styles.css">
<title>Learn ReactJS</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="https://s3.amazonaws.com/codecademy-content/courses/React/react-course-bundle.min.js"></script>
<script src="/app.compiled.js"></script>
<div id="theapp"></div>
</body>
</html>最佳答案
因为您知道您正好需要 4 条消息，所以创建一个包含它们的数组。然后，在每次点击时更新一个计数器，然后使用该计数器从数组中获取相关项。
查看下面的演示。
关于 <h1> 的消息更改点击
这个片段有一个计数器/索引和一个数组，其中包含在初始状态下定义的要显示的消息。然后我们将事件监听器添加到 h1 元素以在点击时触发。这样做会增加索引，只要它不大于 2(此时没有更多消息可显示)。
class MyApp extends React.Component {
constructor() {
super();
this.state = {
messages: ["foo", "bar", "baz", "qux"],
index: 0
};
this.incrementCounter = this.incrementCounter.bind(this);
}
incrementCounter() {
if(this.state.index > 2) return;
this.setState((prevState) => ({index: prevState.index + 1}));
}
render() {
return <h1 onClick={this.incrementCounter}>{this.state.messages[this.state.index]}</h1>
}
}
ReactDOM.render(<MyApp />, 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"></div>关于 window 的消息更改点击
与前面的示例类似，这里我们将监听器添加到窗口对象本身。我们需要在 componentDidMount 方法中执行此操作。
class MyApp extends React.Component {
constructor() {
super();
this.state = {
messages: ["foo", "bar", "baz", "qux"],
index: 0
};
}
componentDidMount() {
window.addEventListener("click", function() {
if(this.state.index > 2) return;
this.setState((prevState) => ({index: prevState.index + 1}));
}.bind(this));
}
render() {
return <h1>{this.state.messages[this.state.index]}</h1>
}
}
ReactDOM.render(<MyApp />, 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"></div>关于javascript - React - 每次用户单击屏幕上的任意位置时更改元素文本的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47672536/