Question

您好我正在尝试拖放应用程序，但我无法在onDragStart事件handeler中设置元素的样式，这是我的代码：

import React, {Component} from 'react'

import {classify} from '../functions/functions'

export default class Actions extends Component {
    constructor(props){
        super(props)
        this.dragstart = this.dragstart.bind(this)
    }
    dragstart(e){
        console.log(e)
            e.style.opacity = .4
            let id = e.id;
            console.log(id)
    }
    render(){

        let name = classify(this.props.name);
        return  <div className={this.props.class} draggable='true' onDragStart={this.dragstart}>
                    <img className="default actions-icon" src={'./icons/'+name+'/'+name+'-.svg'}/>
                    <span className="default">{name}</span>
                </div>
    }
}

感谢您的帮助，谢谢。

Answer 1

您正尝试在事件上设置样式属性，而不是事件目标。 event.target.style.opacity = .4会解决错误。

但是，不是手动操作DOM，而是使用React state更有意义。

例如，我们可以将默认值设置为1，并且仅在我们开始/停止拖动时更改它。

e.g。 Online Demo

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      opacity: 1,
    }

    this.handleDragStart = this.handleDragStart.bind(this)
    this.handleDragEnd = this.handleDragEnd.bind(this)
  }

  handleDragStart(event) {
    this.setState({ opacity: 0.4 })
  }

  handleDragEnd() {
    this.setState({ opacity: 1 })
  }

  render() {
    const { opacity } = this.state

    return (
      <div
        draggable
        style={{ opacity }}
        onDragStart={this.handleDragStart}
        onDragEnd={this.handleDragEnd}
      >
        Drag me
      </div>
    )
  }
}

错误this.style在一个响应compopnent传递的事件处理程序中未定义

1 个答案: