React组件+ jQuery draggable认为每个元素都是同一个对象

Question

免责声明：在这里反应菜鸟 - 如果我对它的使用方式进行混蛋，我道歉。

我尝试将jQuery的可拖动API与React组件结合使用。但是，每当我拖动列表项时，与拖动事件关联的对象都是相同的。

class CompanyListItem extends React.Component {
  componentDidMount() {
    that = this
    $("[role='draggable']").draggable({
        start: (e, ui)=> {
          that.props.dragHandler(event, ui, this);
        },
        revert: true
    });
  }

  render() {
    return (
      <li className="draggable company" id={this.props.company.id} role="draggable">
        <span>{this.props.company.name}</span>
      </li>
    );
  }
}

class CompanyList extends React.Component {
  render() {
    var rows = []

    _.each(this.props.companies, (company) => {  
      rows.push(<CompanyListItem company={company} dragHandler={this.props.dragHandler} key={company.id}/>);
    });

    return (
      <ul> Select
        {rows}
      </ul>
    );
  }
}

例如，下面呈现的组件：

与两个列表元素相关联的对象是＆＃34; HopShop＆＃34; （第一个呈现的列表项）

Answer 1

每当您致电$("[role='draggable']").draggable(...)时，您都会重置其他组件。你应该在id上调用它。

componentDidMount() {
    that = this
    $("#" + this.props.company.id).draggable({
        start: (e, ui)=> {
          that.props.dragHandler(event, ui, this);
        },
        revert: true
    });
}