Question

因此，我有一个日历，仅包含工作日，星期一至星期日。我想实现一些功能，当您单击箭头（向左或向右）时，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;

Answer 1

我不确定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>

在React中按数组重新排列UI

1 个答案: