Question

我有一个父级有状态的react组件，该组件的功能将在子组件中单击html span时发生变化。我想将该方法传递给子组件，并在单击快照时调用它，然后再将其传递回父组件，并根据传递的内容更新状态。我在传递方法并在子组件中调用它时遇到麻烦...

父组件：

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

我想发生的是在子组件中调用该方法时，它调用已传递的方法并在span div内传递文本...

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

Answer 2

您必须在子组件中调用该方法

props.updateDate()

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

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

2 个答案: