add dynamic onClick events in react

Question

To describe my issue I will start by showing the jsx markup:

<Selector>
    <ItemCategory title="A Special Category">
        <Item title="PDF File" file="/file.pdf" />
    </ItemCategory>
    <Item title="PDF File 2" file="/file2.pdf" />
</Selector>

Basically I have a list of PDFs I want to display. Items can belong to a category or not. In the Selector-Component I have the current selected PDF as a state. See my current Selector Component below.

export class Selector extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSelection: null
    };
  }

  render() {
    var currentSelection = this.state.currentSelection || <NothingSelected />;

    return (
      <div className={"selector " + this.props.className}>
        <div className="sidemenu">
          <HeaderItem />
          <div className="sidemenu-area">
            {this.props.children}
          </div>
        </div>
        <div className="selector-area">
          {currentSelection}
        </div>
      </div>
    );
  }
}

Now I want if you click on an Item-Component to change the current selection to the clicked Item.

Any idea how I can add the onClick events?

J. Mark Stevens · Accepted Answer · 2015-09-01 14:44:58Z

In this component you want a this.state.selectedFile and this.itemSelected. Pass this.itemSelected to the item component. Pass this.state.selectedFile to the selected component. In this.itemSelected pass the file from the item components onClick and this.setState({selectedFile: passedFile}).

<Selector currentSelection={this.state.selectedFile}>
        <ItemCategory title="A Special Category">
                <Item title="PDF File" file="/file.pdf" onClick={this.itemSelected}/>
        </ItemCategory>
        <Item title="PDF File 2" file="/file2.pdf" onClick={this.itemSelected}/>
</Selector>

The selector component.

export class Selector extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        var currentSelection = this.props.currentSelection || null;

        return (
            <div className={"selector " + this.props.className}>
                <div className="sidemenu">
                    <HeaderItem />
                    <div className="sidemenu-area">
                        {this.props.children}
                    </div>
                </div>
                <div className="selector-area">
                    <Item title="PDF File 2" file={currentSelection} />
                </div>
            </div>
        );
    }
}

In the item component;

    render() {
        if (this.props.file == null) return null;
        return (
            <div id='pdfDisplay' onClick={this.handleClick}></div>
        )
    }

    _handleClick() {
        if (this.props.onClick) this.props.onClick(this.props.file);
    }

Andreas Møller · Accepted Answer · 2015-09-01 14:37:52Z

0

You can add a click handler to the parent element and then filter in the click handler:

...
<div className="sidemenu-area" oncClick={this.selectItem}>
...

selectItem should then look something like:

selectItem (e) {
  this.setState({
    currentSelection: e.target
  });
}

If your pdf items are more complicated you might have to add more logic to find the right element.

An other option is just to render the pdf items inside the selector component. Then you can just add listeners to the items directly.

answered Sep 1, 2015 at 14:37

Andreas Møller

8495 silver badges9 bronze badges

Collectives™ on Stack Overflow

add dynamic onClick events in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related