Нажмите и переместите предметы ReactJs - PullRequest
Новая
       6

Нажмите и переместите предметы ReactJs

0 голосов
/ 10 февраля 2020

вот моя проблема в следующем коде, у меня есть 3 блока, который содержит текст "Yolo"

он находится в 1 блоке, который я ищу, когда нажимаю "Переместить вправо" текст «Йоло» входит во 2-й блок и то же самое, когда я нажимаю снова, и входит в 3-й блок

У вас есть идея, как это исправить? 

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

Ответы [ 2 ]

1 голос
/ 10 февраля 2020

Вы можете просто сохранить в локальном состоянии компонента строку, которую вы будете перемещать sh, количество доступных 'slots' и текущую позицию строки.

Затем просто используйте 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>
1 голос
/ 10 февраля 2020

Вот рабочая песочница с вещью, которую, я полагаю, вы хотите достичь: https://codesandbox.io/s/immutable-water-xy0n8

...