[英]Refs are empty in a form container
What I'm trying to do is have a Form react component which has a couple methods to check if all the input elements inside are valid. 我要做的是有一个Form react组件,它有几个方法来检查里面的所有输入元素是否有效。
What I've tried is the following: 我试过的是以下内容:
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>
);
}
});
And it has an Input type as well: 它也有一个输入类型:
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()} />
);
}
});
And then this is how I would implement it: 然后这就是我实现它的方式:
<Form elements={["date"]}>
<Input ref="date" type="date"></Input>
</Form>
The magic happens in the FormContainer isValid
method. 魔术发生在FormContainer的
isValid
方法中。 What I want to do is for each input name thats added to the elements
array, to be able to get the reference to it and call it's own isValid
method. 我想要做的是添加到
elements
数组的每个输入名称,以便能够获取对它的引用并调用它自己的isValid
方法。
However I see that self.refs is empty when I try to call it here if (!self.refs[ref].isValid())
. 但是当我尝试在这里调用它时,我看到self.refs为空
(!self.refs[ref].isValid())
。 I'm new to React so I'm not quite sure I understand the refs bit, but I thought that any Children of my <Form>
that had a ref would be able to be accessed through the <Form>
itself. 我是React的新手,所以我不太确定我理解refs位,但我认为我的
<Form>
中有任何ref的孩子都可以通过<Form>
本身访问。 How can I fix this or do it a better way? 我该如何解决这个问题或者做得更好? The point is to gather up all the child elements and check their validity in one place at the
Form
level. 关键是要收集所有子元素,并在
Form
级别的一个位置检查它们的有效性。
Your code works . 你的代码有效 。 Your problem is that when
isValid()
is called 你的问题是当调用
isValid()
时
<span>Things be valid: </span> <span>{self.isValid()}</span>
React hasn't finished parsing the structure yet and thus this.refs
will be an empty object which is why you should refrain from checking this.refs
inside the render()
function. React尚未完成解析结构,因此
this.refs
将是一个空对象,这就是为什么你应该避免在render()
函数中检查this.refs
。
The docs are quite clear about this. 文档对此非常清楚。
Never access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack. 永远不要访问任何组件的render方法中的refs - 或者任何组件的render方法甚至在调用堆栈中的任何位置运行。
I would move the isValid()
functionality to be used when either submitting or actually manipulating the form. 我会移动
isValid()
功能,以便在提交或实际操作表单时使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.