ReactJS -如何从JSX实现回调函数

Question

我有一个关于如何实现回调函数的问题。在我的情况下，我有一个React应用程序与此结构:app比;比;<<strong>按钮/strong>

组件问题是我不知道如何从按钮编写回调函数孩子到

我想在单击按钮组件中的按钮后更新Child中的值(例如:inputFromButton)。handleClick()被触发，一个值将被发送到子组件。有人能帮我做这件事吗?

这是我的代码:https://codesandbox.io/s/nifty-stonebraker-0950w8App组件

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

Button组件

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>
)
}

Answer 1

1. renderButton是一个函数组件，因此，需要在PascalCase:RenderButton(尽管它将更好地作为Button)。

2. 移动handleClick到Child组件

3. 那么在Button中，对handleClick的调用应该是props.handleClick，因为handleClick现在将成为传递到组件中的props对象的属性。我们不需要将数据作为道具传递给按钮，但我们可以这样做，而是只需记录传递到Child中的数据道具。

   handleClick = () => {
   console.log(`handleClick(): ${props.dataFromApp}`);
   }
   

4. 在Child中，不是调用renderButton，而是导入Button，然后在渲染中使用它，在道具中传递处理程序。通过这样做，您将组件设置为"哑巴";这样它就可以在应用程序的其他地方被重用。

   <Button handleClick={this.handleClick} />