文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为数组中的每个项目创建独立的秒表。根据API返回的数据设置停止时间。

问为数组中的每个项目创建独立的秒表。根据API返回的数据设置停止时间。
EN

Stack Overflow用户
提问于 2019-07-09 21:15:14
回答 5查看 621关注 0票数 7

创造独立的秒表。我有两个名为A和B的元素。当我单击A元素时，它的描述Hello和秒表将出现。当我单击B元素时，它的World描述和秒表将出现。我对秒表有问题。当我单击元素A并启动秒表时，转到元素B，然后这个秒表正在运行。我的目标是，当我为元素A运行秒表时，它将只计算这个元素。当他在元素A中停止秒表并转到元素B时，那么在这个元素中秒表将只计算这个元素。我在B元素中停止秒表，然后转到A元素，我将能够恢复秒表。我想提出一些解决这个问题的办法。我通过调用startTime函数发送(带有起始日期的->对象的方法)。我单击stop -> calls (发送带有结束日期的对象的方法post -> )。响应时，项目将被取消使用开始日期和结束日期，秒数(结束日期和开始日期之间的差额)保存在状态中。根据这些数据(开始日期、结束日期和第二次数据)，设置秒表停止的时间。如何关闭浏览器以下载此数据以设置其停止的时间。请给我一些提示。我将定期更正我的代码，并将其插入这里。

预期效应：

单击element A -> start秒表->秒表停止->单击elementB -> start秒表->返回到element A ->在停止时恢复计时器

这里的全部代码：https://stackblitz.com/edit/react-x9h42z

守则的一部分：

App.js

代码语言：javascript
复制
class App extends React.Component {
  constructor() {
    super();

    this.state = {

      items: [
        {
          name: 'A',
          description: 'Hello'
        },
        {
          name: 'B',
          description: 'World'
        }
      ],
      selectIndex: null
    };
  }

  select = (index) => {
    this.setState({
      selectIndex: index
    })
  }


  render() {
    console.log(this.state.selectIndex)
    return (
      <div>
        <ul>
          {
            this.state.items
              .map((item, index) =>
                <Item
                  key={index}
                  index={index}
                  item={item}
                  select={this.select}
                  items = {this.state.items}
                  selectIndex = {this.state.selectIndex}
                />
              )
          }
        </ul>
         <ItemDetails
            items = {this.state.items}
            selectIndex = {this.state.selectIndex}

        />
      </div>
    );
  }
}

秒表

代码语言：javascript
复制
class Stopwatch extends Component {
  constructor() {
    super();

    this.state = {
      timerOn: false,
      timerStart: 0,
      timerTime: 0
    };
  }

  startTimer = () => {
    this.setState({
      timerOn: true,
      timerTime: this.state.timerTime,
      timerStart: Date.now() - this.state.timerTime
    });
    this.timer = setInterval(() => {
      this.setState({
        timerTime: Date.now() - this.state.timerStart
      });
    }, 10);
  };

  stopTimer = () => {
    this.setState({ timerOn: false });
    clearInterval(this.timer);
  };

  resetTimer = () => {
    this.setState({
      timerStart: 0,
      timerTime: 0
    });
  };

  render() {
      const { timerTime } = this.state;
      let centiseconds = ("0" + (Math.floor(timerTime / 10) % 100)).slice(-2);
      let seconds = ("0" + (Math.floor(timerTime / 1000) % 60)).slice(-2);
      let minutes = ("0" + (Math.floor(timerTime / 60000) % 60)).slice(-2);
      let hours = ("0" + Math.floor(timerTime / 3600000)).slice(-2);

    return (
      <div>


    <div className="Stopwatch-display">
      {hours} : {minutes} : {seconds} : {centiseconds}
    </div>


    {this.state.timerOn === false && this.state.timerTime === 0 && (
    <button onClick={this.startTimer}>Start</button>
    )}

    {this.state.timerOn === true && (
      <button onClick={this.stopTimer}>Stop</button>
    )}

    {this.state.timerOn === false && this.state.timerTime > 0 && (
      <button onClick={this.startTimer}>Resume</button>
    )}

    {this.state.timerOn === false && this.state.timerTime > 0 && (
      <button onClick={this.resetTimer}>Reset</button>
    )}
        </div>
      );
    }
}
javascript
reactjs
ecmascript-6
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-07-12 20:42:10

秒表不会更新，因为呈现方法总是返回<Stopwatch />，所以即使selectItem更改没有为您呈现新的<Stopwatch />组件，它也显示了旧的<Stopwatch />组件。

代码语言：javascript
复制
return (
  <div>
    {selectItem ?
      <div>
        <p>Description:{selectItem.description}</p>
        <Stopwatch />
      </div>
      :
      null
    }
  </div>
)

为了响应为您呈现一个新组件，您需要向组件传递一个key属性。

代码语言：javascript
复制
return (
  <div>
    {selectItem ?
      <div>
        <p>Description:{selectItem.description}</p>
        <Stopwatch key={selectItem.name}/>
      </div>
      :
      null
    }
  </div>
)

现在，当您在秒表之间切换时，响应会为您呈现新组件，但是每次您进行秒表重置时，作为组件本身，它都会重新呈现初始化状态变量。

这就是国家管理部门突然出现的地方。可以使用REDUX管理组件状态。如果你想让秒表在后台运行，你也可以写一个简单的服务来帮你做。

演示： stackblitz.

票数 3
EN

Stack Overflow用户

发布于 2019-07-11 04:53:36

您需要的是为每个列表项目创建两个秒表实例。我已经对您提供的链接链接进行了更改。我在列表数组中添加了秒表到每个对象中，并使用唯一的键来响应，以了解它们是不同的组件。现在，我只是简单地用秒表呈现所有的列表项目，为了维护每个秒表的状态，即使在切换之后，我也只是使用一种简单的display技术，而不是完全删除组件。检查密码，让我知道它对你有用吗？

​

代码语言：javascript
复制
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';


class Item extends Component {

  render() {
    const selectItem = this.props.items[this.props.selectIndex]
    console.log(selectItem);
    
    return ( 
      
        <li onClick={() => this.props.select(this.props.index)}>
          <div>
            Name:{this.props.item.name}
          </div>
        </li>
    )
  }
}

class ItemDetails extends Component {
 
  render() {
    const selectItem = this.props.items[this.props.selectIndex]
    console.log(selectItem);
    let content = this.props.items.map((item, index) => {
      return (
        <div className={this.props.selectIndex === index?'show':'hide'}>
          <p>
              Description:{item.description}
          </p>
          {item.stopWatch}
        </div>
      );
    })
    return (  
      <div>
        {selectItem ?
            content
          :
          null
        }
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super();

    this.state = {

      items: [
        {
          name: 'A',
          description: 'Hello',
          stopWatch: <Stopwatch key={1} />
        },
        {
          name: 'B',
          description: 'World',
          stopWatch: <Stopwatch key={2} />
        }
      ],
      selectIndex: null
    };
  }

  select = (index) => {
    this.setState({
      selectIndex: index
    })
  }


  render() {
    console.log(this.state.selectIndex)
    return (
      <div>
        <ul>
          {
            this.state.items
              .map((item, index) =>
                <Item
                  key={index}
                  index={index}
                  item={item}
                  select={this.select}
                  items = {this.state.items}
                  selectIndex = {this.state.selectIndex}
                />
              )
          }
        </ul>
         <ItemDetails
            items = {this.state.items}
            selectIndex = {this.state.selectIndex}

        />
      </div>
    );
  }
}


class Stopwatch extends Component {
  constructor() {
    super();

    this.state = {
      timerOn: false,
      timerStart: 0,
      timerTime: 0
    };
  }

  startTimer = () => {
    this.setState({
      timerOn: true,
      timerTime: this.state.timerTime,
      timerStart: Date.now() - this.state.timerTime
    });
    this.timer = setInterval(() => {
      this.setState({
        timerTime: Date.now() - this.state.timerStart
      });
    }, 10);
  };

  stopTimer = () => {
    this.setState({ timerOn: false });
    clearInterval(this.timer);
  };

  resetTimer = () => {
    this.setState({
      timerStart: 0,
      timerTime: 0
    });
  };

  render() {
      const { timerTime } = this.state;
      let centiseconds = ("0" + (Math.floor(timerTime / 10) % 100)).slice(-2);
      let seconds = ("0" + (Math.floor(timerTime / 1000) % 60)).slice(-2);
      let minutes = ("0" + (Math.floor(timerTime / 60000) % 60)).slice(-2);
      let hours = ("0" + Math.floor(timerTime / 3600000)).slice(-2);

    return (
      <div>
      

    <div className="Stopwatch-display">
      {hours} : {minutes} : {seconds} : {centiseconds}
    </div>


    {this.state.timerOn === false && this.state.timerTime === 0 && (
    <button onClick={this.startTimer}>Start</button>
    )}

    {this.state.timerOn === true && (
      <button onClick={this.stopTimer}>Stop</button>
    )}

    {this.state.timerOn === false && this.state.timerTime > 0 && (
      <button onClick={this.startTimer}>Resume</button>
    )}
    
    {this.state.timerOn === false && this.state.timerTime > 0 && (
      <button onClick={this.resetTimer}>Reset</button>
    )}
        </div>
      );
    }
}


render(<App />, document.getElementById('root'));
代码语言：javascript
复制
h1, p {
  font-family: Lato;
}

.show {
  display: block;
}

.hide {
  display: none;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

​

票数 5
EN

Stack Overflow用户

发布于 2019-07-16 01:16:39

您想要的实际上是有几个停车表(每个项目一个)，但只显示其中一个(这是选定的)。

在ItemDetails组件上，替换：

代码语言：javascript
复制
<Stopwatch />

使用

代码语言：javascript
复制
{this.props.items.map((_, index) => (
  <div style={{ display: index === this.props.selectIndex ? "block" : "none" }}>
    <Stopwatch />
  </div>
))}

将解决您的问题，如下所示：https://stackblitz.com/edit/react-atci76

这种方式的反应是照顾两个停止手表(循环和状态和所有)，但你的HTML只显示其中之一。

或者，如果要显示大量秒表，可以将一个秒表状态作为属性传递给秒表对象，然后使用按钮切换状态。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56960599

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档