react-rails-sample.js

class ArtworkAttrSelect extends React.Component {
  onChange(e) {
    this.setState({ disabled: true })
    $.ajax({
      url: `/artwork/${this.props.id}/attr`,
      type: 'PUT',
      data: { [this.props.attr]: e.target.value }
    }).then(() => this.setState({ disabled: false }))
  }

  render() {
    return (
      <select
        onChange={this.onChange.bind(this)}
        disabled={this.state.disabled}
      >
      {_.map(this.props.options, (val) =>
        <option value="{val}">{t(val)}</option>
      )}
      </select>
    );
  }
}

class ArtworkVisibility extends React.Component {
  // ...
  onToggleVisibility() {
    $.ajax({
      url: `/artwork/${this.props.id}/request_to_publish`,
      type: 'PUT',
      data: { publish: !this.state.publishRequested }
    })
  }
}

$('.artwork-list-item').each(($el) => {
  const availabilitySelect = <ArtworkAttrSelect
    id={$el.attr('data-id')}
    attr='availability'
    options={['forsale', 'range', 'notforsale']}
  />
  const priceSelect = <ArtworkAttrSelect
    id={$el.attr('data-id')}
    attr='price_visibility'
    options={['forsale', 'range', 'notforsale']}
  />
  const visibilityLink = <ArtworkVisibility
    id={$el.attr('data-id')}
  />
  React.render(availabilitySelect, $el.find('.availability-container'))
  React.render(priceSelect, $el.find('.price-container'))
  React.render(visibilityLink, $el.find('.visibility-container'))
})