React組件+ jQuery可拖動的認爲每個元素是相同的對象

Question

免責聲明：反應noob在這裏 - 我道歉，如果我混蛋它的意圖被使用的方式。

我正在嘗試將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> 
    ); 
    } 
} 

例如，組件的下方呈現：

綁兩個列表元素的對象是 「HopShop」（第一呈現的列表項）

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