如何访问表单输入子元素的数组?

I have the following form which I would like to have a dynamic number of player name input fields, passed to PlayerSelect as props.numPlayers, and would like it to read the user input from each of those fields and pass the names as an array to this.props.setPlayers, which is a callback passed from the parent component.

我有下面的表单，我想要有一个动态的玩家名输入域，传递给PlayerSelect作为道具。numplayer，并希望它从每个字段中读取用户输入，并将名称作为数组传递给this.props。setplayer，即从父组件传递的回调。

I am trying to find the right way to access the PlayerNameInput components from the parent, as following doesn't seem to be working:

我试图找到正确的方法来访问来自父类的PlayerNameInput组件，如下所示:

var PlayerSelect = React.createClass({
  getPlayers: function() {
    var playerNames = []
    for (var i = 0; i < this.players.length; i++) {
      var playerName = this.players[i].getDOMNode().value.trim();
      playerNames.push(playerName);
    }
    this.props.setPlayers(playerNames);
  },
  render: function() {
    this.players = []
    for (var i = 0; i < this.props.numPlayers; i++) {
      this.players.push(<PlayerNameInput />);
    }
    return (
      <div className="page">
        <form className="player-select">
          <ol className="players">
            {this.players}
          </ol>
          <button onClick={this.getPlayers}>Done</button>
        </form>
      </div>
    );
  }
});

var PlayerNameInput = React.createClass({
  render: function() {
    return (
      <li><input type="text"/></li>
    );
  }
});

1 个解决方案

#1

You can use ref to access DOM node:

可以使用ref访问DOM节点:

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 ).
不要修改组件的道具以与外部模块进行通信。使用一些其他的库来提供模型以在组件之间进行通信，例如主干或Flux(在我的示例中，为了简单起见，我只是将收集到的播放器名保存到component state中)。

#1