相关疑难解决方法(0)

我在尝试使用React创建一个复选框来选择和取消选择其他单独的复选框(选择/取消选择全部)时遇到了一些问题.我已经阅读了http://facebook.github.io/react/docs/forms.html,发现受控和非受控 <input> s 之间存在差异.我的测试代码如下:

var Test = React.createClass({
    getInitialState: function() {
        return {
            data: [
                { id: 1, selected: false },
                { id: 2, selected: false },
                { id: 3, selected: false },
                { id: 4, selected: false }
            ]
        };
    },
    render: function() {
        var checks = this.state.data.map(function(d) {
            return (
                <div>
                    <input type="checkbox" data-id={d.id} checked={d.selected} onChange={this.__changeSelection} />
                    {d.id}
                    <br />
                </div>
            );
        });
        return (
            <form>
                <input type="checkbox" ref="globalSelector" onChange={this.__changeAllChecks} />Global …

我遇到的情况是，我将两个要素捆绑在一起，而一个董事会以不可商议的方式始终由4个细分小组组成：

var BoardPanel = React.createClass({
  getInitialState: function() {
    return { someval: '' };
  }, 
  render: function() {
    <div>{this.state.someval}</div>
  },
  doSomething: function(v) {
    setState({ someval: v });
  }
});

var BoardLayout = React.createClass({
  render: function() {
    <div>
      <h1>{this.props.label{</h1>
      <div ref="panels">
        <BoardPanel />
        <BoardPanel />
        <BoardPanel />
        <BoardPanel />
      </div>
    </div>
  }
});

BoardLayout应该能够统一地告诉每个BoardPanel调用面板API函数，所以我想做React.js的等效项：

this.querySelectorAll("BoardPanel")
    .array()
    .forEach(function(panel, idx) {
       panel.doSomething(idx);
    });

请注意，我明确不希望在这里访问DOM节点，我要访问的阵营定义的虚拟元素，对通话功能，并且永远不会触及任何真正的浏览器的DOM使用。

我看了看React.children实用程序函数，但是这些函数没什么用，因为无法指定我想要的子代，并且this.props.children要给我两个div元素，因为BoardPanel元素位于模板内部。

（我也很反对ref="..."为每个BoardPanel 添加一次性标识符，因为考虑到格式合理，结构化的标记，不需要做任何事情，这是一个可行的解决方法，但似乎像拍打一样明智。 HTML文件中每个元素的ID，而不是依赖查询选择器）

我可以通过根本不将它们实际包含在模板中并使用React.create(BoardPanel)in 添加它们来动态生成它们，BoardLayout.getInitialState但这会使立即具有洞察力的模板结构变成不透明的占位符，这也是我不希望做的事情。 …