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>中有任何ref的孩子都可以通過<Form>本身訪問。 我該如何解決這個問題或者做得更好？ 關鍵是要收集所有子元素，並在Form級別的一個位置檢查它們的有效性。

Answer 1

你的代碼有效 。 你的問題是當調用isValid()時

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

React尚未完成解析結構，因此this.refs將是一個空對象，這就是為什么你應該避免在render()函數中檢查this.refs 。

文檔對此非常清楚。

永遠不要訪問任何組件的render方法中的refs - 或者任何組件的render方法甚至在調用堆棧中的任何位置運行。

我會移動isValid()功能，以便在提交或實際操作表單時使用。

JSFiddle演示