javascript - 在 React 中调用从父组件到子组件的方法传递

Question

我有一个父有状态反应组件，该组件具有在子组件中单击 html 跨度时会更改的功能。我想将该方法传递给子组件并在单击快照时调用它然后我想将它传递回父组件并根据传递回来的内容更新状态。我无法传递该方法并在子组件中调用它...

父组件：

export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            dates: [],
            workouts: [],
            selectedDate: '',
            selectedWorkouts: []
        }

        this.updateDateAndWorkouts = this.updateDateAndWorkouts.bind(this)
        axios.defaults.baseURL = "http://localhost:3001"
    }

    updateDateAndWorkouts = () => {
        console.log('clicked')
    }

    render() {
        return (
            <div>
                <DateBar data={this.state.dates}/>
                <ClassList workouts={this.state.selectedWorkouts} updateDate={this.updateDateAndWorkouts}/>
            </div>
        )
    }

这是子组件：

export default function Datebar(props) {
    return (
        <div>
            {props.data.map((day, index) => {
                return (
                    <div key={index}>
                        <span onClick={props.updateDate}>
                            {day}
                        </span>
                    </div>
                )
            })}
        </div>
    )
}

我想要发生的是当在子组件中调用该方法时，它调用传递的方法并在跨度 div 中传递文本...

标签： javascriptreactjs

Answer 1

您必须将函数实际传递给子组件

export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            dates: [],
            workouts: [],
            selectedDate: '',
            selectedWorkouts: []
        }

        this.updateDateAndWorkouts = this.updateDateAndWorkouts.bind(this)
        axios.defaults.baseURL = "http://localhost:3001"
    }

    updateDateAndWorkouts = () => {
        console.log('clicked')
    }

    render() {
        return (
            <div>
                <DateBar data={this.state.dates} updateDate={this.updateDateAndWorkouts} />
                <ClassList workouts={this.state.selectedWorkouts} updateDate={this.updateDateAndWorkouts}/>
            </div>
        )
    }