当您希望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> ); }}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)