javascript - 表单容器中的引用为空

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[ref].isValid())，当我尝试在此处调用它时，我看到 self.refs 是空的.我是 React 的新手，所以我不太确定我是否理解 refs 位，但我认为我的 <Form> 的任何 child 有 ref 的可以通过 <Form> 访问本身。我该如何解决这个问题或以更好的方式做到这一点？重点是收集所有子元素并在 Form 的一个地方检查它们的有效性。水平。

Answer 1

您的代码有效。你的问题是当 isValid() 被调用时

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

React 还没有完成对结构的解析，因此 this.refs 将是一个空对象，这就是为什么你应该避免检查 this.refs 里面的 render() 函数。

docs对此很清楚。

切勿在任何组件的渲染方法内部访问引用 - 或者当任何组件的渲染方法甚至在调用堆栈中的任何位置运行时。

我会移动 isValid() 功能，以便在提交或实际操作表单时使用。

JSFiddle demo