獲取另一個組件的輸入值React js

我有兩個組件，一個是應用程序組件，另一個是側欄組件，我一直在使用側欄中的輸入字段，我想在應用程序組件中獲取該輸入字段的值這怎麼可能？獲取另一個組件的輸入值React js

來源

2017-04-02 Zohaib Ahmad

on click in textfield or when click on AppComponent？ – mfahadi

是App組件的補充工具欄子組件嗎？ –

我有側邊欄組件中的小表單想要獲取輸入字段的值，這是在應用程序組件中的單擊事件中的形式，我不希望您使用更改事件 –

在純反應可以通過從一個組件添加回調，並用它爲母公司組件來改變自己的狀態，然後從父母的發送狀態輸入值，以你的第二個組件

來源

2017-04-02 13:46:26 AlexeyKuznetsov

您是否有任何示例？。我確實使用了稍微不同的方式在應用程序組件中定義funtion，並在應用程序組件中的邊欄組件中觸發。我可以通過refs或documetn.getelment通過id將id置於輸入框中的輸入字段中，該輸入框位於邊欄組件 –

下一個答案，這裏是 – AlexeyKuznetsov

的道具你可以試試lifting the state up。

創建一個包含您的兩個組件的新組件。在該新組件中，創建一個功能，您將在側邊欄組件中以props的身份傳遞該功能。

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>

來源

2017-04-02 13:55:07 oobgam

我不想在輸入框上使用onchange事件 –

請解釋一下，爲什麼？ – AlexeyKuznetsov

Worked me me ...如果我想從多個字段（如用戶名/密碼）獲取數據，該怎麼辦？ – Omer

獲取另一個組件的輸入值React js

回答

相關問題