Question

我正在使用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>
    );
  }

Answer 1

检查时将密钥保存到状态。在setTimeout内的函数中使用此键，只有在检查和超时之间键未更改时才删除。

密钥必须是在不同时间不同的密钥，因此您可以使用递增的数字或简单的内容，例如当前的unix时间ngOnInit() { this.event = this.route.snapshot.data['event']; }

如果项目被选中两次，则第二次检查将覆盖该密钥，从而在比较密钥时使第一次检查的定时删除失败。

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 ); }); };。

延迟，可复位功能延迟

1 个答案: