我有兩個組件,一個是應用程序組件,另一個是側欄組件,我一直在使用側欄中的輸入字段,我想在應用程序組件中獲取該輸入字段的值這怎麼可能?獲取另一個組件的輸入值React js
回答
在純反應可以通過從一個組件添加回調,並用它爲母公司組件來改變自己的狀態,然後從父母的發送狀態輸入值,以你的第二個組件
您是否有任何示例? 。我確實使用了稍微不同的方式在應用程序組件中定義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>
我不想在輸入框上使用onchange事件 –
請解釋一下,爲什麼? – AlexeyKuznetsov
Worked me me ...如果我想從多個字段(如用戶名/密碼)獲取數據,該怎麼辦? – Omer
- 1. 從另一個組件獲取參數[React JS]
- 2. 我的按鈕沒有從JS React中獲取值並輸入
- 3. 從一個JS文件獲取變量的值到另一個
- 4. 如何從另一個PHP文件獲取輸入值?
- 5. React/Node - 將js組件包含在另一個文件中
- 6. 另一個組件中的React JS引用函數
- 7. 如何獲取Angular JS的輸入值?
- 8. 獲取react-geosuggest輸入字段的輸入值
- 9. react-native從另一個組件導入組件
- 10. React Native檢測組件是否被拖入另一個組件
- 11. 獲取下一個輸入的值
- 12. JQuery:在用戶輸入一個值後獲取輸入的值
- 13. 從另一個組件更新一個React的組件狀態
- 14. React JS組件應該返回沒有包裝的另一個組件
- 15. 從js輸入框中獲取價值
- 16. 獲取輸入數字值與JS
- 17. 如何獲取用戶的輸入值到JS數組中?
- 18. React組件錯誤(輸入)
- 19. 如何獲取組件的輸入值並將其渲染到另一個組件中並返回
- 20. 如何在另一個js文件中獲取javascript值
- 21. 節點Js - 會話值從另一個文件中獲取
- 22. 通過另一個組件中的狀態反應輸入值
- 23. 獲取輸入值並在另一個div中顯示
- 24. 從一個JS函數獲取變量值到另一個
- 25. 輸入並從一個ConcurrentDictionary中獲取數組的值C#
- 26. 從輸入中獲取下一個值
- 27. 獲取輸入字段值發送到另一個輸入字段
- 28. 從另一個組件獲取參數
- 29. 無法將React組件推送到另一個React組件中的數組
- 30. 如何使用React Js獲取表單動態輸入數據?
on click in textfield or when click on AppComponent? – mfahadi
是App組件的補充工具欄子組件嗎? –
我有側邊欄組件中的小表單想要獲取輸入字段的值,這是在應用程序組件中的單擊事件中的形式,我不希望您使用更改事件 –