Refs在表单容器中是空的

Question

我要做的是有一个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是空的(!self.refs[ref].isValid()).我是React的新手,所以我不太确定我理解refs位,但我认为我的任何有孩子的孩子<Form>都可以通过它<Form>自己进入.我该如何解决这个问题或者做得更好？重点是收集所有子元素并在该Form级别的一个位置检查它们的有效性.

Answer 1

你的代码有效.你的问题是什么时候isValid()被调用

<span>Things be valid: </span> <span>{self.isValid()}</span>

React尚未完成解析结构,因此this.refs将是一个空对象,这就是为什么你应该避免this.refs在render()函数内部进行检查.

该文档是关于这个很清楚.

永远不要访问任何组件的render方法中的refs - 或者任何组件的render方法甚至在调用堆栈中的任何位置运行.

我会isValid()在提交或实际操作表单时移动要使用的功能.

JSFiddle演示