我想编写一个Form组件,该组件可以导出方法以验证其子级。不幸的是,表单没有“看到”其子级上的任何方法。
这是我定义Form的潜在子代的方法:
var Input = React.createClass({ validate: function() { ... }, });
这是我定义Form类的方式:
var Form = React.createClass({ isValid: function() { var valid = true; this.props.children.forEach(function(component) { // --> This iterates over all children that I pass if (typeof component.validate === 'function') { // --> code never reaches this point component.validate(); valid = valid && component.isValid(); } }); return valid; } });
我注意到可以使用引用在子组件上调用方法,但不能通过props.children调用方法。
这种React行为是否有原因?
我怎样才能解决这个问题?
技术原因是,当您尝试访问子组件时,它们尚未真正存在(在DOM中)。它们尚未安装。它们已<Form>作为构造函数prop或方法作为react 类 传递给您的组件。(因此命名为React.createClass())。
<Form>
React.createClass()
正如您所指出的,可以使用refs来绕开它,但是我不建议这样做。在许多情况下,ref往往是不想要的东西的捷径,因此应避免使用。
可能是设计使然,使父母难以/不可能使用孩子的方法。他们不应该这样做。如果孩子的方法对孩子是私密的,则应该在孩子的方法中:他们在孩子内部做某些事情,这些事情不应该直接向上传达给父母。如果真是这样,那么应该在父级内部进行处理。因为父母至少拥有孩子拥有的所有信息和数据。
现在以您的情况为例,我想象每个输入(子)组件都有某种特定的验证方法,该方法可以检查输入值,并基于结果进行一些错误消息反馈。假设在不正确的字段周围有一个红色的轮廓。
以反应方式,可以通过以下方式实现:
runValidation
setState( { runValidation: true });
render()
if (this.props.runValidation) { this.validate() }
validate()
现在,这还不能解决,是您可能要在所有孩子都通过验证之后在表单级别进行一些检查:例如,当所有孩子都可以的时候,提交表单。
为了解决这个问题,您可以将refs快捷方式应用于最终检查并提交。并在函数<Form>内部实现一个方法componentDidUpdate(),检查每个孩子是否可以(例如,带有绿色边框)以及是否单击提交然后提交。但作为一般规则,我强烈建议您不要使用引用。
componentDidUpdate()
对于最终形式验证,更好的方法是:
validateForm
this.props.validateForm(someChildID)
对于更长(且更复杂)的方法来进行反应(使用助熔剂)的形式验证,可以查看本文。