我试图将bootstrap包装到具有集成表单验证的组件中。
短: 我们说我有
sudo chmod +x /usr/local/bin/docker-compose
<Form>
<FieldGroup>
<Field rules={'required'}/>
</FieldGroup>
</Form>
验证后,如何通知Field
(父节点)添加课程?
我创建了一个简化的codepen版本here
我想依赖验证状态,然后更改FieldGroup的状态所以我可以正确更改类名。 (添加FieldGroup
has-warning
等)并最终将类添加到Form组件。
答案 0 :(得分:6)
您需要将callback
传递给子组件。我只是分叉你的codepen并添加了一些代码片段。
http://codepen.io/andretw/pen/xRENee
这是主要概念, 在 “父” 组件中创建回调函数并将其传递给 “子项“ 组件
即。子组件需要额外的支持才能获得回调:
<Form>
<FieldGroup>
<Field rules={'required'} cb={yourCallbackFunc}/>
</FieldGroup>
</Form>
在<FieldGroup />
(父母):
class FieldGroup extends React.Component{
constructor(props){
super(props);
this.state = {
color: 'blue'
}
}
cb (msg) {
console.log('doing things here', msg)
}
render() {
const childrenWithProps = React.Children.map(this.props.children,
child => React.cloneElement(child, {
cb: this.cb
})
)
return (
<div class='fields-group'>
<label> field </label>
{ childrenWithProps }
</div>
);
}
};
在<Field />
(孩子):
class Field extends React.Component{
constructor(props){
super(props);
this.state = {
empty: true
}
this.validate = this.validate.bind(this);
}
validate(e){
let val = e.target.value;
console.log(!val);
this.setState({empty: !val});
//here to notify parent to add a color style!
// do call back here or you may no need to return.
this.props.cb(val)
return !val;
}
render() {
return (
<div>
<input type='text' onBlur ={(event) => this.validate(event)}/>
{this.state.empty && 'empty'}
</div>
);
}
};
你可以在回调函数中做你想做的事情。 (您也可以将<Form />
的回调传递给孙子,让它发挥作用,但您需要重新考虑它的设计是好还是不好。)