引用在表单容器中为空

我想做的是有一个Form react组件，它有几个方法来检查里面的所有输入元素是否有效。

我尝试了以下方法：

var FormContainer = React.createClass({
        getDefaultProps: function() {
            return {
                elements: []
            };
        },
        getInitialState: function() {
            return {
                errors: {}
            };
        },
        className: function() {
            return 'form-container';
        },
        isValid: function() {
            var valid = true,
            self = this;
            this.props.elements.forEach(function(ref){
                if (!self.refs[ref].isValid()){
                    valid = false;
                }
            });
            return valid;
        },
        render: function() {
            var self = this;
            return (
                <form className={self.className()}>
                    {self.props.children}
                    <span>Things be valid: </span> <span>{self.isValid()}</span>
                </form>
            );
        }
    });

它也有一个输入类型：

var Input = React.createClass({
        getDefaultProps: function() {
            return {
                type: 'text'
            };
        },
        getInitialState: function() {
            return {
            };
        },
        className: function() {
            return 'form-input';
        },
        isValid: function() {
            return false;
        },
        render: function() {
            var self = this;
            return (
                <input type={self.props.type} className={self.className()} />
            );
        }
    });

然后这就是我将如何实现它：

<Form elements={["date"]}>
    <Input ref="date" type="date"></Input>
</Form>

神奇的事情发生在FormContainer isValid方法中。我想做的是，对于添加到elements数组中的每个输入名称，都能够获得对它的引用，并调用它自己的isValid方法。

然而，当我尝试在这里调用self.refs if (!self.refs[ref].isValid())时，我发现它是空的。我是React的新手，所以我不太确定我是否理解refs，但我认为我的<Form>中任何有ref的Children都可以通过<Form>本身访问。我该如何解决这个问题或采取更好的方法？重点是收集所有子元素，并在Form级别的一个位置检查它们的有效性。