ReactJS：如何访问表单输入子数组？答案

【问题标题】：ReactJS: How to access an array of form input children?ReactJS：如何访问表单输入子数组？
【发布时间】：2015-04-02 01:31:48
【问题描述】：

我有以下表格，我希望有一个动态数量的玩家姓名输入字段，以props.numPlayers 的形式传递给PlayerSelect，并希望它从每个字段中读取用户输入并传递以数组的形式命名为this.props.setPlayers，这是从父组件传递的回调。

我正在尝试找到从父级访问 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>
    );
  }
});

【问题讨论】：

标签： javascript arrays forms input reactjs

【解决方案1】：

你可以使用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

还要记住：

当您创建元素数组时，每个元素都必须具有唯一的key
不要修改组件的 props 来与外部模块通信。使用其他一些提供模型在组件之间进行通信的库，例如 Backbone 或 Flux（在我的示例中，为了简单起见，我只是将收集的玩家名称保存到组件状态）。

【讨论】：