reactjs – React:如何将道具从孩子传递给父母到另一个孩子?
发布时间:2020-12-15 20:40:39 所属栏目:百科 来源:网络整理
导读:我在这里设置简单: 我有一个父组件,它有2个子组件附加到此父组件.在第一个子组件中:用户更改输入的值.然后,该更改的值将是我想从此子项传递给父项的prop,以便它可以传递给附加到同一父组件的另一个子项. Main (parent component)___| |_Child 1 |_Child 2
我在这里设置简单:
我有一个父组件,它有2个子组件附加到此父组件.在第一个子组件中:用户更改输入的值.然后,该更改的值将是我想从此子项传递给父项的prop,以便它可以传递给附加到同一父组件的另一个子项. Main (parent component)___| |_Child 1 |_Child 2 this the set up currently,please view 从用户输入到UI更改的流程:1.在“子1”中:调整滑块,onChange传递值到父组件; 2.将此prop(新滑块值)传递给Parent组件,以便它可用于“Child 2”组件; 3.那个prop,valueOfUserInput(新的滑块值)将用于关于样式化“Child 2”组件元素的if / else语句中. 我见过类似于我的问题的解决方案和教程,但它们对我来说并不合适.我一整天都在乱砍,穿插会议. 任何帮助或建议都会很棒.谢谢大家对这个React noob的耐心等待.
当您希望2个孩子进行通信或共享某些数据时,在React中执行此操作的方法是将状态提升(
source).
这意味着孩子们使用的州应该住在父母身边.然后父母将状态传递给孩子. 要从子进程中的操作更新状态,通常的模式是从在子进程中执行操作时调用的父进行传递函数. 这是一个应该做你想要的例子: class Parent extends React.Component { constructor(props) { super(props); this.state = { valueOfUserInput: '' }; } handleUserInputChange = event => { this.setState({ valueOfUserInput: event.target.value,}); }; render() { const { valueOfUserInput } = this.state; return ( <div> <Child1 valueOfUserInput={valueOfUserInput} onUserInputChange={this.handleUserInputChange} /> <Child2 valueOfUserInput={valueOfUserInput} /> </div> ); } } class Child1 extends React.Component { render() { const { valueOfUserInput,onUserInputChange } = this.props; return <input type="text" value={valueOfUserInput} onChange={onUserInputChange} />; } } class Child2 extends React.Component { render() { const { valueOfUserInput } = this.props; return ( <div> {valueOfUserInput} </div> ); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |