How to use d3 events like drag declaratively with React?

I understand you can do d3 + React declaratively like this:

class Line extends React.Component {

drawLine() {
    let xScale = d3.scaleTime()
        .domain(d3.extent(, ({date}) => date));
        .rangeRound([0, this.props.width]);

    let yScale = d3.scaleLinear()
        .domain(d3.extent(, ({value}) => value))
        .rangeRound([this.props.height, 0]);

    let line = d3.line()
        .x((d) => xScale(
        .y((d) => yScale(d.value));

    return (

render() {

However, if I were to implement drag and click it seems like I gotta to call it in the JSX like <svg onDrag={this.onDrag} onClick={this.onClick}/> because I have to listen to the drag event from React, am I misunderstanding something, or is there some way to get around this? Making my own onDrag detector or using another library seems to be unnecessary work.

I understand that I can just write everything like:

class blah {

componentDidUpdate(){d3.on('drag').call('drag', dragged}

Sorry if the syntax is off. But in this approach, events are detected in d3 so I can use d3.behavior.drag() etc. Anyways, doing react + d3 with the first approach just appeared a bunch cleaner to me, letting d3 do the math and react do the rendering, so is there someway to integrate d3.behavior.drag() in the first approach?