反应:如何通知父母更改 [英] React: how to notify parent for changes
问题描述
我正在尝试将引导程序包装到具有集成表单验证的组件中.
简短:假设我有
一旦Field
通过验证,我如何通知FieldGroup
(父节点)添加一个类?
我在这里
创建了一个简化的codepen版本我想根据验证状态,然后更改 FieldGroup 的状态,以便我可以正确更改类名.(添加 has-warning
has-danger
等)并最终将类添加到 Form 组件中.
您需要将 callback
传递给子组件.我只是分叉了你的 codepen 并添加了一些如下片段.
http://codepen.io/andretw/pen/xRENee
这里是主要概念,在 "parent" 组件中创建一个回调函数并将其传递给 "child" 组件
即子组件需要一个额外的道具来获取回调:
在
(父)中:
class FieldGroup 扩展 React.Component{构造函数(道具){超级(道具);this.state = {颜色:'蓝色'}}CB(味精){console.log('在这里做事', msg)}使成为() {const childrenWithProps = React.Children.map(this.props.children,孩子 =>React.cloneElement(child, {cb: 这个.cb}))返回 (<标签>字段{ childrenWithProps });}};
在
(子)中:
class 字段扩展 React.Component{构造函数(道具){超级(道具);this.state = {空:真实}this.validate = this.validate.bind(this);}验证(e){让 val = e.target.value;控制台日志(!val);this.setState({empty: !val});//这里通知父级添加颜色样式!//请在此处回拨,否则您可能不需要返回.this.props.cb(val)返回 !val;}使成为() {返回 (<div><input type='text' onBlur ={(event) =>this.validate(event)}/>{this.state.empty &&'空的'}
);}};
而且你可以在回调函数中做你想做的事情.(你也可以从 传一个回调给孙子,让它工作,但你需要重新考虑它的设计好不好.)
I'm trying to wrap bootstrap into components with integrated form validation.
short: Let's say I have
<Form>
<FieldGroup>
<Field rules={'required'}/>
</FieldGroup>
</Form>
Once Field
pases validation, how can I notify FieldGroup
(parent node) to add a class?
I created a simplified codepen version here
I would like depending on validation status, then change the state of FieldGroup So I can properly change the class name. (add has-warning
has-danger
etc) and ultimately add class to the Form component.
You need to pass a callback
to the child component. I just forked your codepen and added some snippet as below.
http://codepen.io/andretw/pen/xRENee
Here is the main concept, Make a callback function in "parent" component and pass it to the "child" component
i.e. The child component needs an extra prop to get the callback:
<Form>
<FieldGroup>
<Field rules={'required'} cb={yourCallbackFunc}/>
</FieldGroup>
</Form>
In <FieldGroup />
(parent):
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>
);
}
};
In <Field />
(child):
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>
);
}
};
And you can do the things you want in the callback function. (You can also pass a callback from <Form />
to the grandson and get it work, but you need to rethink the design of it is good or not.)
这篇关于反应:如何通知父母更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!