javascript – 表单容器中的Refs为空

2019-08-30 03:33:43 阅读：122 来源： 互联网

我要做的是有一个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>进行访问.本身.我该如何解决这个问题或者做得更好？关键是要收集所有子元素,并在表单级别的一个位置检查它们的有效性.

解决方法:

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

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

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

docs对此非常清楚.

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

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

JSFiddle demo

标签：javascript,reactjs
来源： https://codeday.me/bug/20190830/1765784.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 表单容器中的Refs为空