Question

在ReactJs中是否可以/可以在拖放操作中执行渲染？

我想到的一个特定用例是尝试在ReactJS中构建一个月视图日历，该日历在前后移动多日事件的过程中，日历上的所有其他日事件将向后移动以显示（尽管用法仍在拖动）在do实际“丢弃”之前对所有事件的影响。（即在任何一天仅假设一个事件，因此页面旨在在用户移动一个事件时移动/交换一天事件）

类似于在影片时间轴上拖放影片剪辑，您会看到在拖动过程中影片剪辑将如何交换，突出显示了如果用户释放鼠标按钮并执行“放下”操作会发生的情况。

问题：ReactJS是否可能/建议这样做？如果是，这里的概念是什么？即，在拖动事件处理程序期间，将执行什么调用来触发“刷新”？或者，如果您只是在拖动事件处理程序中重新定位其他组件/事件，React会在拖动过程中自动进行实时渲染吗？

Answer 1

是-以下示例：

import React, { Component } from 'react';
import 'rc-slider/assets/index.css';
import './GcSlider.css';

export class GcSlider extends Component {
  state = {
    value: 50,
  };

  handleChange = (value) => {
    this.setState({ value });
  };

  buttonClick = (e) => {
    console.log('Button Clicked');
  }

  render() {
    const { value } = this.state;

    let divs = [1,2,3,4,5,6,7,8,9].map(item => <div className="box {item}">Item {item}</div>)
    console.log('DIVS = ' + divs)

    return (
      <div>  
        <div style={{alignContent:true}}>
          <h1>Hello</h1>
        </div>
        <div className="wrapper">
          { divs }
          <div className="box {item}"></div>
          <div className="box {item}">Item B</div>
          <div className="box {item}">Item C</div>
          <div class="overlay" draggable>oevrlay</div>
        </div>
      </div>
    )
  }
}

export default GcSlider

和CSS

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

.overlay {
  position: absolute;
  top: 0px;
  height:80px;
  border: 2px solid red;
}

在ReactJs中，是否可以/可以在拖放操作中执行渲染？

1 个答案: