score:4

Accepted answer

you can use ref to access dom node:

var playerselect = react.createclass({
  getinitialstate: function() { return { names: [] } },
  getplayers: function(event) {
    event.preventdefault();
    var playernames = []
    for (var i = 0; i < this.props.numplayers; i++) {
      var playername = this.refs['player-' + i].getdomnode().value.trim();
      playernames.push(playername);
    }
    this.setstate({ names: playernames });
  },
  render: function() {
    var players = []
    for (var i = 0; i < this.props.numplayers; i++) {
      players.push(
          <li key={'player-' + i}>
              <input ref={ 'player-' + i } type="text"/>
          </li>
      );
    }
    return (
      <div classname="page">
        <form classname="player-select">
          <ol classname="players">
            {players}
          </ol>
          <button onclick={this.getplayers}>done</button>
        </form>
        <div>{ this.state.names.join(', ') }</div>
      </div>
    );
  }
});

jsfiddle

also remember:

  • when you create array of elements every single one has to have unique key
  • don't modify props of your component to communicate with outside modules. use some other library which provides models to communicate between components, for example backbone or flux ( in my example for simplicity i just saved collected player names to components state ).

Related Query

More Query from same tag