栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

将表单元素状态传递给同级/父元素的正确方法是什么?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

将表单元素状态传递给同级/父元素的正确方法是什么?

因此,如果我对您的理解正确,那么您的第一个解决方案是建议您将状态保留在根组件中?我不能代表React的创建者,但是总的来说,我发现这是一个合适的解决方案。

保持状态是创建React的原因之一(至少在我看来)。如果您曾经实现自己的状态模式客户端来处理具有很多相互依赖的动态部件的动态UI,那么您会喜欢React的,因为它减轻了很多这种状态管理的麻烦。

通过在层次结构中进一步保持状态,并通过事件对其进行更新,您的数据流仍然几乎是单向的,您只是在响应Root组件中的事件,实际上并没有通过两种方式绑定那里的数据,您要告诉Root组件“嘿,这里发生了什么事,请检查值”,或者您要向上传递子组件中某些数据的状态以更新状态。您在C1中更改了状态,并且希望C2知道它,因此,通过更新Root组件中的状态并重新渲染,由于C2的道具在Root组件中进行了更新并传递了,因此C2的道具现在处于同步状态。

class Example extends React.Component {  constructor (props) {    super(props)    this.state = { data: 'test' }  }  render () {    return (      <div>        <C1 onUpdate={this.onUpdate.bind(this)}/>        <C2 data={this.state.data}/>      </div>    )  }  onUpdate (data) { this.setState({ data }) }}class C1 extends React.Component {    render () {      return (        <div>          <input type='text' ref='myInput'/>          <input type='button' onClick={this.update.bind(this)} value='Update C2'/>        </div>      )    }    update () {      this.props.onUpdate(this.refs.myInput.getDOMNode().value)    }})class C2 extends React.Component {    render () {      return <div>{this.props.data}</div>    }})ReactDOM.renderComponent(<Example/>, document.body)


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/409790.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号