javascript - 单击并移动项目 ReactJs

Question

这是我在以下代码中遇到的问题，我有 3 个 block ，其中包含文本“Yolo”

它位于我寻找的第 1 个 block 中，当我单击“向右移动”时，文本“Yolo”进入第 2 个 block ，当我再次单击并进入第 3 个 block 时也是如此

你有办法解决这个问题吗？

import React from 'react';

import './index.css' export default class Demo extends React.Component {   

  constructor(props) {
    super(props);;    
    };
  render() {
    return (
      <div className="HereIsForFlex">
        <button>Move to the Right</button>
        <div className="test">
          <p> yolo</p>
          <div className="fruitsArrows">
          </div>
        </div>
        <div className="test1">
        </div>
        <div className="test2">
        </div>
      </div>
      );  
     }; 
    }

Answer 1

您可以简单地在组件的本地状态中存储您想要移动的字符串、可用的“槽位”数量以及字符串的当前位置。

然后，只需使用 onClick 事件处理程序来增加当前位置:

const { render } = ReactDOM

class Demo extends React.Component {
	
  constructor(props) {
    super(props)
    this.clickHandler = this.clickHandler.bind(this)
    this.state = {currentPosition: 0, totalLength: 3, val: 'yolo'}
  }
  
  clickHandler(){ 
    this.setState({currentPosition: (this.state.currentPosition + 1)%this.state.totalLength})
  }
  
  render() {
    return (
      <div>
        <button onClick={this.clickHandler} >Move to the Right</button>
        {
          Array.from(
            {length: this.state.totalLength},
            (_,i) => (
              <div key={i} className="slot">
                <p>{i == this.state.currentPosition ? this.state.val : null}</p>
              </div>
            )
          )
        }
      </div>
  )}
}

render (<Demo />, document.getElementById('root'))

.slot{display:inline-block;vertical-align:top;text-align:center;margin-top:30px;margin-left:10px;width:50px;height:50px;background-color:grey;color:white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>