ReactJS

Question

我对如何实现回调函数有疑问。就我而言，我有一个具有这种结构的 React 应用程序： App > Child > Button components

问题是我不知道如何编写从 Button 到 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>
    )
}

Answer 1

renderButton 是一个函数 component，因此需要采用 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} />
```

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

ReactJS - How to implement a callback function from JSX

javascript

callback

react-props

react-state