childClick

index.js

const Parent = React.createClass({

  getInitialState() {
    selectedItem: null
  },
  
  _onChildSelect(i) {
    this.setState({selectedItem: i})
  },
  
  render() {
    const names = [
      'First',
      'Second',
      'Third'
    ]
    let selected
    if (this.state.selectedItem) {
      selected = <span>You have selected {names[this.state.selectedItem]}</span>
    }
    return (
      <div className='parent'>
        {selected}
        {names.map((name, i) => {
          return (
            <Child name={name} onSelect={this._onChildSelect.bind(this, i)}
          )
        }}
      </div>
    )
  }
})


const Child = React.createClass({

  propTypes: {
    name: React.PropTypes.string.isRequired
    onSelect: React.PropTypes.func
  },

  getDefaultPropTypes() {
    return {
      onSelect() {}
    }
  },
  
  getInitialState() {
    return {
      seletected: false
    }
  }

  _onClick(e) {
    e.preventDefault()
    this.setState({selected: true})
    this.onSelect(e)  
  },
  
  render() {
    const className = classNames('row', {
      selected: this.state.selected
    })
      
    return (
      <div className={classname}>
        <a href='' onClick={this._onClick}
           {this.props.name}
        </a>
      </div>
    )
  }
})