Question

我的第四个插入符被打破，我不知道为什么它不会减少。

constructor(props) {
  super(props);
  this.containerWidth = props.width || "100%";

  this.state = {
    current_hour: 0,
    current_minute: 0,
    hour_interval: 1,
    minute_interval: 1
  };

  // this.handleAdjuster = this.handleAdjuster.bind(this);
}

handleAdjuster(action, type) {
  if (action === "add") {
    this.setState({
      [`current_${type}`]: this.state[`current_${type}`] + this.state[`${type}_interval`]
    });
  } else if (action === "minus") {
    this.setState({
      [`current_${type}`]: this.state[`current_${type}`] - this.state[`${type}_interval`]
    });
  }
}

我的点击处理程序有什么问题吗？我做了一个演示 https://codesandbox.io/s/v8xw3lnzpy 要展示我的问题，请尝试点击第4个插入符号。

Answer 1

你的＆＃34;减去＆＃34; （4rth）carret在里面＆＃34;添加＆＃34; （3）carret，每当你按下＆＃34;减去＆＃34;第一个孩子完成了，减去了，但是父母也完成了（那就是＆＃34;添加＆＃34;第三个carret），它超越了第四个carret。把你的4rth carret div放在你的第3个而不是里面。简单的等级错误。

这样的事情：

  <div>
    <div className="control-wrap">
      <div
        onClick={() => this.handleAdjuster("add", "minute")}
        className="caret-wrap"
      >
        <span className="caret">&#9650;</span>
      </div>

      <div
        onClick={() => this.handleAdjuster("minus", "minute")}
        className="caret-wrap"
      >
        <span className="caret">&#9660;</span>
      </div>
    </div>
  </div>

ES6计算反应中的属性

1 个答案: