Question

在 React 组件上传递的事件处理程序中，错误 this.style 未定义

2018-01-11

827

javascript html css reactjs

嗨，我正在尝试制作一个拖放应用程序，但我无法设置 onDragStart 事件处理程序中元素的样式，这是我的代码：

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 开始，并仅在开始/停止拖动时更改它。

例如在线演示

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