代码之家 › 专栏 › 技术社区 › Paul

延迟,可重置功能延迟

jsx reactjs javascript

Paul · 技术社区 · 6 年前

我正在React中开发一个todo应用程序,并尝试内置功能,该功能将延迟X秒删除选中的项,如果在该时间内未选中该框,则不会删除该框。

我遇到的主要问题是当用户在相同的X秒内选中、取消选中和重新检查所有内容时。所需的功能是,如果要选中,计时器将启动、取消选中并重置计时器,请再次选中新计时器启动。现在计时器继续计时,因此如果x=5,那么如果选中,则在5秒内取消选中并重新选中所有项,该项将很快被删除。

  handleToggle = value => () => {
    const { checked } = this.state;
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    this.setState({
      checked: newChecked
    });

    new Promise((resolve, reject) => {
      setTimeout(
        () =>
          resolve(
            this.state.checked.includes(value) ? Store.delete(value.id) : false
          ),
        3000
      );
    });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <List>
          {Store.get().map(item => (
            <ListItem
              key={item.id}
              role={undefined}
              dense
              button
              className={classes.listItem}
            >
              <Checkbox
                onClick={this.handleToggle(item)}
                checked={this.state.checked.indexOf(item) !== -1}
                tabIndex={-1}
                disableRipple
              />
              <TextField
                id={item.id}
                className={classes.textField}
                value={item.value}
                onChange={this.handleChange(item)}
                margin="normal"
              />
            </ListItem>
          ))}
        </List>
      </div>
    );
  }

1 回复 | 直到 6 年前

Jemi Salo 6 年前

检查时将密钥保存到状态。在setTimeout内的函数中使用该键,并且仅当该键在检查和超时之间保持不变时才删除。

密钥必须是在不同时间不相同的内容,因此可以使用递增的数字或类似当前Unix时间的简单内容。 new Date().valueOf()

如果一个项目被选中两次,第二次检查将覆盖该键,因此在比较键时,第一次检查的定时删除将失败。

handleToggle = value => () => {
  const { checked, keys } = this.state;
  const currentIndex = checked.indexOf(value);
  const newChecked = [...checked];
  const newKeys = [...keys];
  const key = new Date().valueOf();

  if (currentIndex === -1) {
    newChecked.push(value);
    newKeys[value] = key;
  } ...

  this.setState({
    checked: newChecked,
    keys: newKeys
  });

  new Promise((resolve, reject) => {
    setTimeout(
      () =>
        resolve(
          (this.state.checked.includes(value) && this.state.keys[value] === key) ? Store.delete(value.id) : false
        ),
      3000
    );
  });
};

别忘了初始化 this.state.keys 对象为空。