Ad

React HandleClick In Parent

- 1 answer

Had some problem before setting accessible instance variable in parent from child.

As it turns out you cannot SET parent vars from child in the manner that i was going for. I proceeded and successfully called setState, but the state itself seem to change each time i set it, im not overwriting the Howler state (this.state.howler), i just instantiate another one...

Didn't solve my original problem with music that plays simultaneously.

The state shouldn't change and the previous state should(?) be overwritten when

this.setState({ howler: howlerInstance, });

in SongContainer is called? Don't get it at all.

    // Components
        var SongContainer = React.createClass({
            getInitialState: function() {
                return {
                    data: [],
                    howler: 0,
                };
            },
            handleUserInput : function(howlerInstance) {
                this.state.howler.stop();

                this.setState({
                    howler: howlerInstance,
                });

                this.state.howler.play();
            },
            loadTrackListFromServer: function() {
                $.ajax({
                url: this.props.url,
                dataType: 'json',
                cache: false,
                success: function(data) {
                    this.setState({data: data.playlist});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
                });
            },
            componentDidMount: function() {
                this.loadTrackListFromServer();
                setInterval(this.loadTrackListFromServer, this.props.pollInterval);

                this.state.howler.stop().play();
            },
            render: function() {
                return (
                <div className="container songsContainer">
                    <SongList howler={this.state.howler} onUserInput={this.handleUserInput} data={this.state.data} />
                </div>
                );
            }
        });

        var SongList = React.createClass({
            handleChange: function(howlerInstance) {
                this.props.onUserInput(
                    howlerInstance
                );
            },
            render: function() {
                var i = 0;
                var self = this;
                var trackNodes = this.props.data.map(function(track, i) {
                    return (
                        <Song onUserClick={self.handleChange} key={i} >
                            {track}
                        </Song>
                    );
                    i++;
                });

                return (
                    <div className="row">
                        <div className="col-sm-12">
                            <div className="list-group-wrapper">
                                <div className="list-group">
                                {trackNodes}
                                </div>
                            </div>
                        </div>
                    </div>
                );

            }
        });

        var Song = React.createClass({
            handleClick : function(e) {
                console.log(2);
                e.preventDefault();
                var song = new Howl({
                    urls: [e.target.href]
                });

                this.props.onUserClick(
                    song
                );
            },
            render: function() {
                return (
                <a href={'/static/mp3s/' + this.props.children.toString()} onClick={this.handleClick} className="list-group-item song">
                    {this.props.children}
                </a>
                );
            }
        });

        ReactDOM.render(
            <SongContainer url="/playlist" pollInterval={2000} />,
            document.getElementById('content')
Ad

Answer

There are quite a few things that are incorrect in your code. I suggest going to the official React documentation and starting with the tutorial there.

For my answer I will attempt to address the concept of passing down functions from parent to child.

var SongList = React.createClass({
  logTrack: function(track) {
    console.log(track)
  }

  render: function () {
    var trackNodes = this.props.data.map(function(track, i) {
      return (
        <Song
          key={i} 
          handleClick={this.logTrack} // pass function through props
         >
          {track}
        </Song>
      );
    });

    return (
      <div className="row">
        {trackNodes}
      </div>
    );
  }
})

var Song = React.createClass({
  render: function () {
    <a onClick={ function () { this.props.handleClick('some value') }>
      {this.props.children}
    </a>
  }
})
Ad
source: stackoverflow.com
Ad