react-dom：点击时增量更改元素的不透明度

Question

我希望能够通过单击按钮来增加 DOM 元素的不透明度。

围绕 React 的概念，我认为这应该通过使用state和函数来完成setState()。

但是，我不断遇到以下代码的错误：

import React, { Component } from 'react'

class ThoughtfulThoughts extends Component {

  state = {
    opacity: 0.4,
    thoughts:
      [
        "live and let leave",
        "just pee yourself",
        "who knows what 'laf' is?"
      ]
  }

  makeAppear = () => {
    // TODO: this causes a "RangeError: Maximum call stack size exceeded"
    this.setState(prevState => ({
      opacity: prevState.opacity + 0.2
    }))
  }

  render() {
    return (
      <div className="thoughtful-thoughts">
        <div className="current-thought" style={{opacity: this.state.opacity}}>
          {this.state.thoughts.map((thought, i) => (<p>{thought}</p>))}
        </div>
        <button onClick={this.makeAppear()}>Think for me</button>
      </div>
    )

  }
}

export default ThoughtfulThoughts

我不想使用 jQuery ，也不想使用直接DOM操作，也不想 使用CSS 转换，但想以“React 方式”在 JS 中完成此操作。

任何指示将不胜感激！

Answer 1

您的代码中有几个小问题：

1. 在您的按钮组件上，更改onClick={this.makeAppear()}为onClick={this.makeAppear}.

2. 使用函数方法而不是对象方法来根据先前的状态变量更新状态变量，做得很好。但是，您有一个较小的语法。要么做：

   this.setState(prevState => (
     {opacity: prevState.opacity + 0.2}
   ));
   

   或者

   this.setState(prevState => {
     return {opacity: prevState.opacity + 0.2}
   });
   

   无论你喜欢哪个。

3. key为您从 : 返回的每个项目添加一个属性map()：所以基本上：

   {this.state.thoughts.map((thought, i) => (<p key={i}>{thought}</p>))}
   

   您可以i安全地用作此处的键，因为 thoughts数组中项目的顺序将保持静态。有关密钥以及如何正确使用它们的更多信息，请查看此处。

演示：

this.setState(prevState => (
  {opacity: prevState.opacity + 0.2}
));

this.setState(prevState => {
  return {opacity: prevState.opacity + 0.2}
});