Holen Sie sich eine andere Komponente Eingabewert Reagieren js

Question

Ich habe zwei Komponenten ist eine App-Komponente und andere Sidebar-Komponente Ich habe Eingabefeld in Seitenleiste verwendet, und ich möchte den Wert dieses Eingabefeldes in meiner App-Komponente auf klicken Wie könnte das möglich sein?

Answer 1

In reinen reagiert es möglich ist, durch Rückruf von einer Komponente hinzufügen und es in übergeordneter Komponente verwenden, um ihren Zustand zu ändern und dann Eingabewert von Eltern Zustand zu Requisiten Ihrer zweiten Komponente

Answer 2

Sie können versuchen, lifting the state up senden.

Erstellen Sie eine neue Komponente, die Ihre zwei Komponenten enthält. Erstellen Sie in dieser neuen Komponente eine Funktion, die Sie innerhalb der Sidebar-Komponente als props übergeben.

class ContainerComponent extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      valueThatNeedsToBeShared: '' 
     } 
    } 

    handleChange(e) { 
     this.setState({valueThatNeedsToBeShared: e.target.value}) 
    } 

    render() { 
     return (
      <div> 
       <AppComponent value={this.state.valueThatNeedsToBeShared} /> 
       <SidebarComponent handleChange={this.handleClick.bind(this)} value={this.state.valueThatNeedsToBeShared} /> 
      </div> 
     ) 
    } 
} 

const SidebarComponent = ({handleChange, value}) => <aside> 
    <input value={value} onChange={handleChange} /> 
</aside> 

const AppComponent = ({value}) => <div> 
    value from sidebar: {value} 
</div>