表单容器中的引用为空

Question

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

我试过的是：

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> 中任何具有 ref 的 Children 都可以通过 <Form> 本身。我该如何解决这个问题或以更好的方式做到这一点？重点是收集所有 child 元素并在 Form 级别的一个地方检查它们的有效性。

Answer 1

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

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

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

docs对此很清楚

永远不要访问任何组件的渲染方法内部的引用 - 或者当任何组件的渲染方法甚至运行在调用堆栈中的任何地方时。

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

JSFiddle demo

表单容器中的引用为空

Refs are empty in a form container

javascript

reactjs