我正在构建一个组件,该组件将用于逐步完成的过程,例如:
这
Workflow
组件采用
array
将“台阶”作为道具,然后完成其余部分。上图中是如何调用它的:
let steps = [
{
display: "Sign Up Form",
component: SignupForm
},
{
display: "Verify Phone",
component: VerifyPhone
},
{
display: "Use Case Survey",
component: UseCase
},
{
display: "User Profile",
component: UserProfile
},
];
return (
<Workflow
steps={steps}
/>
);
这个
component
字段指向要在该步骤中渲染的组件。例如
SignupForm
组件如下所示:
export default class SignupForm extends React.Component {
...
render() {
return (
<div>
<div className="page-header">
<h1>New User Sign Up Form</h1>
<p>Something here...</p>
</div>
<div className="form-group">
<input type="email" className="form-control" placeholder="Email address..." />
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</div>
);
}
}
我面临的问题是,每一步都需要
Next
按钮以验证该步骤中的信息并移动到下一步。我只是想把这个按钮放在每个步骤的组件中,但这会让它变得不那么友好。当用户单击“下一步”,并且所有内容都有效时,该步骤应折叠,下一步应打开。然而,这意味着
工作流
组件需要渲染此按钮。
所以,我需要
工作流
组件调用每个步骤组件的方法来验证步骤中的信息,并返回一个承诺,让它知道是否通过或失败(带有任何错误消息)。我需要如何调用此方法?这里是
工作流
组件渲染所有步骤
像
<step.component {...this.props} />
:
{
this.state.steps.map((step, key) => {
return (
...
<Collapse isOpen={!step.collapsed}>
<step.component {...this.props} />
<Button color="primary"
onClick={() => this.validate(key)}>Next</Button>
<div className="invalid-value">
{step.error}
</div>
</Collapse>
...
);
})
}
这将呈现next按钮以及onClick处理程序
validate()
:
validate(i) {
let steps = _.cloneDeep(this.state.steps);
let step = steps[i];
step.component.handleNext().then(function () {
...
}).catch((err) => {
...
});
}
理想情况下,
step.component.validate()
将调用
validate
已渲染的组件内的方法:
export default class SignupForm extends React.Component {
....
validate() {
return new Promise((resolve, reject) => {
resolve();
})
}
render() {
...
}
}
…可以访问该组件的状态。但事实并非如此。我怎样才能让它工作?我读了一些关于转发裁判的文章,但不太清楚这是怎么回事。非常感谢您的帮助!