在 React 中按数组重新排列 UI

debugcn 发表于 Dev

TempAcct4Stack

所以，我有一个日历，只有工作日，周一到周日。我想做一些事情，当您单击箭头（向左或向右）时，UI 会重新排列，因此，基本上，我们有

< monday tuesday wednesday thursday friday saturday sunday >

如果我按下指向左边的箭头，我想重新排列 UI 看起来像 ->

< sunday monday tuesday wednesday thursday friday saturday >

基本上，从数组中的最后一个索引开始我有以下内容

<ul className="weekday">
  <li> <FontAwesomeIcon icon="arrow-left" /> </li>
    {this.state.weekDays.map(day => <li key={day}> {day} </li>)}
  <li onClick={this.handleIncrement}> <FontAwesomeIcon icon="arrow-right" /> </li>
</ul>

在这里，我从工作日数组中以 ul 呈现所有工作日

weekDays: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]

我也有一个currenyDay:0;在我的状态，在数组下，你可以看到右箭头上的 onClick 增加了当前天，因为在右箭头上我必须将当前天增加 1，函数看起来像

handleIncrement = () => {
  this.state.currentDay = this.state.currentDay +1;
}

但是，它什么都不做，根本不起作用，为什么？

-------------------------- 完整代码

class Calendar extends Component {
     state = { 
      weekDays: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
      currentDay:0
    };

    handleIncrement = () => {
      this.state.currentDay = this.state.currentDay +1;
    }

    render() { 
        return (  
            <div className="calendar">
            <div className="col leftCol">
              <div className="content">
                <h1 className="date">My React.js Calendar</h1>
              </div>
            </div>
            <div className="col rightCol">
              <div className="content">
                {/* <div className="clearfix"></div> */}
                <ul className="weekday">
                  <li> <FontAwesomeIcon icon="arrow-left" /> </li>
                    {this.state.weekDays.map(day => <li key={day}> {day} </li>)}
                  <li onClick={this.handleIncrement}> <FontAwesomeIcon icon="arrow-right" /> </li>
                </ul>
                {/* <div className="clearfix"></div> */}
                {/* <div className="clearfix"></div> */}
              </div>
            </div>
            {/* <div className="clearfix"></div> */}
        </div>
        );
    }
}

export default Calendar;

或德罗里

我不确定的目的是什么currentDay，但它似乎在渲染中没有任何影响。

我将通过改变状态数组来实现这一点。主要思想是setState使用更新程序函数进行递增或递减调用。setState每当您想根据前一个状态创建新状态时，请使用的更新程序功能。我们取weekDays前一个状态的，并按照我们想要的顺序生成一个新数组。

class Weekdays extends React.Component {
  state = {
    weekDays: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
  };
  
  moveLeft = () => this.setState(({ weekDays: [head, ...tail] }) => ({
    weekDays: [...tail, head]
  }));
  
  moveRight = () => this.setState(({ weekDays }) => ({
    weekDays: [...weekDays.slice(-1), ...weekDays.slice(0, -1)]
  }));
  
  render() {
    const { weekDays } = this.state;
    
    return (
      <ul className="weekday">
        <li onClick={this.moveLeft}>&lt;</li>
        
          {this.state.weekDays.map(day => <li key={day}> {day} </li>)}
        
        <li onClick={this.moveRight}>&gt;</li>
      </ul>    
    );
  }
}

ReactDOM.render(
  <Weekdays />,
  demo
);

.weekday {
  display: flex;
  list-style: none;
}

.weekday > li {
  margin: 0 0.5em;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。