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

Question

我有以下表单，我希望有一个动态数量的玩家名称输入字段，作为 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>
    );
  }
});

Answer 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（在我的示例中，为简单起见，我只是将收集的玩家名称保存到组件状态）。

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

ReactJS: How to access an array of form input children?

javascript

arrays

forms

input

reactjs