Advertisement
Guest User

React: weird event binding behavior in dynamic children.

a guest
Nov 27th, 2014
181
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // live preview @ https://preview.c9.io/weee/diabeteslog_react/index.html#records
  2. // react version: 0.12.1
  3. // Ctrl + F "BUG" to highlight relevant lines
  4.  
  5. var Records = React.createClass({
  6.   mixins: [ReactFireMixin],
  7.   getInitialState: function () {
  8.     return {records: {}};
  9.   },
  10.   render: function() {
  11.     var records = this.state.records;
  12.  
  13.     return <table className="table">
  14.             <thead>
  15.               <tr><th>Timestamp</th>
  16.                   <th>Glucose (mg/dl)</th>
  17.                   <th>Carbs (grams)</th>
  18.                   <th>Bolus (units)</th>
  19.                   <th>Basal (units)</th>
  20.                   <th>Notes</th>
  21.               </tr>
  22.             </thead>
  23.             <tbody>
  24.             {Object.keys(records).reverse().map(function(key) {
  25.               return <tr key={key}>
  26.                       <td>{(new Date(records[key].timestamp)).toLocaleString()}</td>
  27.                       <td>{records[key].glucose}</td>
  28.                       <td>{records[key].carbs}</td>
  29.                       <td>{records[key].bolus}</td>
  30.                       <td>{records[key].basal}</td>
  31.                       <td><button id="mrButton" onClick={this.noteClick}>Click</button></td> //BUG: doesn't register event
  32.                      </tr>;
  33.             })}
  34.             </tbody>
  35.            </table>;
  36.   },
  37.   noteClick: function (event) {
  38.     //BUG: this should getting triggered, but its not.
  39.     alert("callback reached");
  40.   },
  41.   componentWillMount: function() {
  42.     this.bindAsObject(
  43.       new Firebase("https://diabeteslog.firebaseio.com/records/"),
  44.       "records");
  45.   },
  46.   componentDidUpdate: function() {
  47.     var buttons = $(this.getDOMNode()).find('button');
  48.     var buttonCount = 0;
  49.     var recordCount = Object.keys(this.state.records).length;
  50.     buttons.each(function() {
  51.       buttonCount += 1;
  52.     })
  53.     //BUG: this works fine
  54.     //buttons.click(this.noteClick);
  55.     console.log(recordCount === buttonCount ?
  56.                 "record and button count match" :
  57.                 "record and button count don't match");
  58.   }
  59. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement