Question

我正在尝试使用reactjs进行幻灯片放映。在幻灯片放映中，下一个按钮完美地工作但前一个按钮有问题。您可以显示演示here。请帮我解决这个问题。

感谢。

下一个按钮处理程序，从下一个数组中删除下一个值并将当前数字添加到pre数组。我有一种情况，下一个数组的长度变为0，在这种情况下按下此数组旁边的数字并从pre数组中删除。这个算法工作得很完美，我在预按钮处理程序中使用这个概念，但在那里预长度变为0这个方法不起作用。

下一个按钮处理程序：

onNextHandler = () => {
    let currentIndex = this.state.current;
    let nextIndex = this.checkIndex( currentIndex + 1 );
    let pre = [ ...this.state.pre ];
    let next = [ ...this.state.next ];
    const nextIndexInNext = next.indexOf( this.numbers[ nextIndex ] );
    next.splice( nextIndexInNext, 1 );
    pre.push( this.numbers[ currentIndex ] );
    if ( next.length === 0 ) {
      next.push( this.numbers[ this.checkIndex( nextIndex + 1 ) ] );
      const indexNextInPre = pre.indexOf( this.numbers[ this.checkIndex( nextIndex + 1 ) ] )
      pre.splice( indexNextInPre, 1 );
    }
    this.setState( {
      current: nextIndex,
      pre,
      next,
    } );
  }

前一个按钮处理程序：

  onPrevHandler = () => {
    let currentIndex = this.state.current;
    let prevIndex = this.checkIndex( currentIndex - 1 );
    let pre = [ ...this.state.pre ];
    let next = [ ...this.state.next ];
    const prevIndexInPre = pre.indexOf( this.numbers[ prevIndex ] );
    pre.splice( prevIndexInPre, 1 );
    next.splice( 0, 0, this.numbers[ currentIndex ] );
    if ( pre.length === 0 ) {
      pre.push( this.numbers[ this.checkIndex( prevIndex - 1 ) ] );
      const indexNextInPre = next.indexOf( this.numbers[ this.checkIndex( prevIndex - 1 ) ] );
      next.splice( indexNextInPre, 1 );
    };
    this.setState( {
      current: prevIndex,
      pre,
      next,
    } );
  };

在渲染函数上我将每个数组映射到li元素，最后将它们连接到一个数组，如下所示。

const pre = this.state.pre;
    const pres = pre !== null
      ? pre.map( num => {
        return <li key={ num } value={ num} className="before">{ num }</li>
      } )
      : null;
    const next = this.state.next;
    const nexts = next !== null
      ? next.map( num => {
        return <li key={ num } value={ num } className="after">{ num }</li>
      } )
      : null;
    const current = [ <li key={ this.state.current+1 } value={ this.state.current + 1 } className="current">{ this.numbers[ this.state.current ] }</li> ];

    let numsList = pres.concat( current, nexts );

当我改变如下的concat时：

let numsList = nexts.concat( current, pres );

在这种情况下，pres按钮工作正常，但没有下一个按钮处理程序。

如何在reacjs中制作幻灯片？

0 个答案: