当前位置: 首页 > 知识库问答 >
问题:

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

东方栋
2023-03-14
    null
    null

就像在我的示例中一样,如果我有一个C1的大型呈现,我真的不想仅仅因为C1有一个form元素就把C1的整个render放到P的render中。

我该怎么做?

共有1个答案

燕和裕
2023-03-14

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

维护状态是创建React的原因之一(至少我认为)。如果您曾经实现过自己的状态模式客户端来处理有许多相互依赖的移动部分的动态UI,那么您会喜欢React,因为它减轻了许多状态管理的痛苦。

通过将状态保持在层次结构中的更高位置,并通过事件更新它,数据流仍然是单向的,您只是响应根组件中的事件,并不是通过双向绑定真正获得那里的数据,而是告诉根组件“嘿,下面发生了什么事情,请检查值”,或者将子组件中一些数据的状态向上传递以更新状态。您更改了C1中的状态,并且希望C2知道它,因此,通过更新根组件中的状态并重新呈现,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)
 类似资料:
  • 问题内容: 假设我有一个React类P,它渲染了两个子类C1和C2。 C1包含一个输入字段。我将此输入字段称为Foo。 我的目标是让C2对Foo的变化做出反应。 我已经提出了两种解决方案,但是它们都不对。 第一个解决方案: 为P分配一个状态,。 在P中创建一个函数,该函数接受一个事件并设置。 将其作为传递给C1 ,然后让C1绑定到Foo。 这可行。每当Foo的值改变时,它都会触发P中的a,因此P会

  • 本文向大家介绍JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法,包括了JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法的使用技巧和注意事项,需要的朋友参考一下 最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ 先给大家上干货: 【js的获取方式】 【jQuery的获取方式】

  • 我创建了一个元素列表,我想更新其中一个列表元素 这是对update方法的调用: 这是更新方法: 在该方法中,我收到警告“从方法生成函数”,并建议“方法‘update\elem’可能是‘static’” 更新列表元素而不收到警告的正确方法是什么?

  • 本文向大家介绍给兄弟元素的标签设置红色相关面试题,主要包含被问及给兄弟元素的标签设置红色时的应答技巧和注意事项,需要的朋友参考一下

  • 本文向大家介绍如果列表元素li的兄弟元素为div,会产生什么情况?相关面试题,主要包含被问及如果列表元素li的兄弟元素为div,会产生什么情况?时的应答技巧和注意事项,需要的朋友参考一下 单纯的对html来说主要是破坏了语义结构吧, css方面来说不好统一控制样式,div默认也没有list-style

  • 本文向大家介绍在JavaScript中使用列表元素的兄弟?,包括了在JavaScript中使用列表元素的兄弟?的使用技巧和注意事项,需要的朋友参考一下 为了找到列表元素的同级 元素,javascript提供了一种称为node.nextSibling的方法。如果我们知道列表的任何成员,我们可以找到其同级。让我们简要地讨论一下。 语法 示例 在以下示例中,有3个列表元素。使用 nextSibling属