反应中父组件与子组件双向绑定问题

在项目中我们可能会遇到类似这样的场景，也就是父子组件的双向数据绑定

首先，先把在头中引入react.js、react-dom.js和可选择的babel.js(这里需要注意引用的顺序，react.js必须在react-dom.js之前)

头部脚本src=' http :反应。js '/script script src=' http : react-DOM。js '/script script src=' http : babel。js '/脚本/头在身体里新建一个挂载点

body div id='app'/div/body然后就可以开始写小艾了，注意脚本标签需注明类型类型为文本/巴别塔或' text/jsx '

脚本tpye='text/babel'//父组件父类扩展了做出反应.组件{构造函数（道具){ super(道具)this.state={ fname: '父组件，fage: 18，key : ' ' }；} setFname(事件){ this。setstate({ fname :事件。目标。值，键：事件。目标。value })；//设置文件名值为投入的价值值；键用来监听值是否变化} SetFage(事件){ this。SetState({ Fage : }事件。目标。值，键：事件。目标。value })} ToData(data){ this。SetState({ fname :数据。name })；这个。SetState({ fage : data。年龄})；} render() { return (div表格边框=' 1 '单元格间距=' 0 ' t正文tr th colSPan=' 3 '父组件数据/th/tr tdname/TD TD { this。国家。namefvalue }/TD tdinput value={ this。国家。fname } onChange={ this。setfname。绑定(本)}//TD//受控组件当投入值改变时触发方法setFname/tr tdage/TD TD { this。国家。agef value }/TD tdinput value={ this。国家。fage } onChange={ this。塞弗格。bind(this)}//TD/tr/t body/table br//子组件标签里将父组件的数据传递给子组件，在子组件里利用小道具接收；键值变化时，子组件数据更新子键={这个。国家。key } fname={ this。国家。fname } fage={ this。国家。fage } ToData={ this。今天。bind(this)}/Son/div)} } brbr//子组件芭芭拉类儿子扩展了做出反应.组件{构造函数（道具){ super(道具)这个。state={ svname : this。道具。fname，//将父组件传下来的值赋给sVname sVage :这个。道具。fage } } sVname(ev){ console。日志(ev。目标)这个。setstate({ sVname : ev。目标。value })} sVage(ev){ this。setstate({ sVage : ev。目标。value })} toData(data){//console。记录(sVname)这个。道具。toda ta(data)} render(){ return(div)按钮onClick={ this。今天。绑定(此，名称：点我传值/按钮表格边框='1 '单元格间距='0' tbody tr th colSpan='3 '子组件数据/th/tr tdname/TD TD { this。国家。svname }/TD tdinput值={这个。国家。svname } onChange={ this。svname。bind(this)}//TD/tr tdage/TD { this。国家。svage }/TD tdinput值={这个。国家。svage } onChange={ this。svage。bind(this)}//TD/tr/t body/table/div)}/script总结

以上所述是小编给大家介绍的反应中父组件与子组件双向绑定问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！