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

【问题标题】：Call a method pass from parent component to child component in React在 React 中调用从父组件到子组件的方法传递
【发布时间】：2019-08-23 20:08:15
【问题描述】：

我有一个父状态反应组件，该组件具有一个功能，当在子组件中单击 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 内传递文本...

【问题讨论】：

你没有在这里传递任何函数：<DateBar data={this.state.dates}/>
具体是什么不起作用？您没有将函数传递给Datebar，而是将一个函数传递给ClassList。此外，您不需要手动 bind 箭头函数——这是箭头函数的要点之一。
<DateBar data={this.state.dates} updateDate={this.updateDateAndWorkouts}/>

标签： javascript reactjs

【解决方案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>
        )
    }

【讨论】：

现在正在工作。我觉得我好笨。我有个问题。当我运行它和consoe.log(e.target) 我得到<span value="2019-08-10">2019-08-10</span>。我只想抓住2019-08-10。当我做console.log(e.target.value) 时，它会抛出一个未定义的。你知道我应该为此做些什么吗？
@OmarJandali ... Span 没有值，它们有内容。
所以最好切换选择器或调用 e.target.content @DaveNewton

【解决方案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>
    )
}

【讨论】：

其实那是错的。您最终会将 updateDateAndWorkouts 的返回值（未定义）传递给 onClick 处理程序，而不是函数回调本身