我有一個關于如何實作回呼函式的問題。就我而言，我有一個具有以下結構的 React 應用程式：App > Child > Button components
問題是我不知道如何撰寫從Button到Child的回呼函式
單擊按鈕組件中的按鈕后，我想更新 Child 中的值（例如：inputFromButton）。handleClick() 被觸發，一個值將被發送到子組件。有人可以幫我做到這一點嗎？
這是我的代碼：https ://codesandbox.io/s/nifty-stonebraker-0950w8 App 組件
import React from 'react';
import Child from './Child';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Data from App'
}
}
handleCallback = (childData) => {
this.setState({ data: childData })
}
render() {
const { data } = this.state;
return (
<div>
<Child dataFromApp={data} />
</div>
)
}
}
export default App
子組件
import React from 'react';
import { renderButton } from './Button';
class Child extends React.Component {
state = {
inputFromApp: "",
inputFromButton: ""
}
componentDidMount() {
this.setState({
inputFromApp: this.props.dataFromApp
})
}
render() {
const renderButtonItem = renderButton(this.props);
const inputFromApp = this.state.inputFromApp
const inputFromButton= this.state.inputFromButton
return (
<div>
<input value={inputFromApp}></input>
<br></br>
<input value={inputFromButton}></input>
<div>{renderButtonItem}</div>
</div>
)
}
}
export default Child
按鈕組件
import React from 'react';
export const renderButton = (props) => {
const handleClick = () => {
console.log('handleClick() props data from App: ' props.dataFromApp)
}
return (
<button onClick={handleClick}>Click</button>
)
}
uj5u.com熱心網友回復：
renderButton是一個函式組件，因此需要使用 PascalCase:RenderButton（盡管最好使用Button）。移動
handleClick到Child組件。然后在
Button呼叫中handleClick應該是props.handleClick因為handleClick現在將props物件的屬性傳遞給組件。我們不需要將資料作為道具傳遞給按鈕，而是可以將傳遞到的資料道具記錄下來Child。handleClick = () => { console.log(`handleClick(): ${props.dataFromApp}`); }在
Child，而不是呼叫renderButton，匯入Button，然后在渲染中使用它傳遞道具中的處理程式。通過這樣做，您可以使組件盡可能“愚蠢”，以便可以在應用程式的其他地方重用它。<Button handleClick={this.handleClick} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/477013.html
標籤：javascript 反应 打回来 反应道具 反应状态