reactjs - 将方法作为道具传递给子组件时，React onChange 不是函数

问题描述

将方法向下传递到较低的几个子组件时遇到问题。我需要在父组件中保持状态，因此将方法向下传递以更改父组件中的状态值的原因。现在我知道这已经回答了好几次了，但是我读到的所有内容都不起作用？

这是我正在尝试做的事情：

父方法代码（OrderView.js）：

 handleChargesDateChange = (e) => {
    const date = e.target.value;
    const chargeId = e.target.name;
    console.log(date);
    this.setState({
        updatedChargeDates: [
            ...this.state.updatedChargeDates,
            {[chargeId]: date}
        ]
    })
}

然后，此方法作为道具传递下来render()：

 <Grid.Row>
            <Grid.Column width={16}>
                <OrderSummary
                    order={this.state.order}
                    fuelTypes={this.state.fuelTypes}
                    vehicleClasses={this.state.vehicleClasses}
                    deviceTypes={this.state.deviceTypes}
                    chargeTypes={this.state.chargeTypes}
                    featureTypes={this.state.featureTypes}
                    itemGroups={this.state.itemGroups}
                    itemTypes={this.state.itemTypes}
                    **updateChargeDates={this.handleChargesDateChange}**
                />
            </Grid.Column>
        </Grid.Row>

然后在OrderSummary我收到如下道具并再次将其传递给另一个子组件：

const updateChargeDates = this.props;

    console.log("Itemsssss " + this.props.order.items);
    const panes = [];
    if (this.props.order.devices.length > 0) {
        panes.push({
            menuItem: 'Devices', render: () => <DevicesTab
                devices={this.props.order.devices || []}
                fuelTypes={this.props.fuelTypes || []}
                vehicleClasses={this.props.vehicleClasses || []}
                deviceTypes={this.props.deviceTypes || []}
                chargeTypes={this.props.chargeTypes || []}
                featureTypes={this.props.featureTypes || []}
            />
        });
    }

    if (this.props.order.items.length > 0) {
        panes.push({
            menuItem: 'Additional Items', render: () => <ItemsTab
                items={this.props.order.items || []}
                itemGroups={this.props.itemGroups || []}
                itemTypes={this.props.itemTypes || []}
                chargeTypes={this.props.chargeTypes || []}
                **updateChargeDates={updateChargeDates}**
            />
        })
    }

再次，然后我将其传递给另一个子ItemsTab组件：

 render() {
    const { items, itemGroups, itemTypes, chargeTypes, updateChargeDates } = this.props;
    return <Tab.Pane className='no-border'>
        {items.length > 0 && <Grid>
            <Grid.Row columns={2}>
                <Grid.Column>
                    <ItemGroup
                        itemOrder={items[this.state.currentItem] || {}}
                        itemGroups={itemGroups || []}
                        itemTypes={itemTypes || []}
                    />
                </Grid.Column>
                <Grid.Column>
                    <Charges
                        charges={items[this.state.currentItem].charges || {}}
                        chargeTypes={chargeTypes || []}
                        handleDateChange={this.handleChange}
                        **updateChargeDates={updateChargeDates}**
                    />
                </Grid.Column>
            </Grid.Row>

最后，在Charges组件中，我尝试使用该方法来简单地更新日期：

 render() {
 const {charges, chargeTypes, updateChargeDates} = this.props;
 if (charges.length === 0) { return null; }

return <Form>
    <h3>Charges</h3>
    {charges.map(charge => {
        console.log(charge);
        const chargeType = chargeTypes.find(type => type.code === charge.type) || {};
        return <Grid>
            <Grid.Row columns={2}>
                <Grid.Column>
                    <Form.Input
                        key={charge.id}
                        label={chargeType.description || charge.type}
                        value={Number(charge.amount).toFixed(2)}
                        readOnly
                        width={6} />
                </Grid.Column>
                <Grid.Column>
                    <DateInput
                        name={charge.id}
                        selected={this.state.newDate}
                        **onChange={updateChargeDates}**
                        value={charge.effectiveDate}
                    />
                </Grid.Column>
            </Grid.Row>
        </Grid>
    })}
    <Divider hidden />
    <br />
</Form>
}

注意：我已经突出显示了我关心的代码位**

我在浏览器控制台中收到的错误如下：

现在我知道通常会在您不bind使用该类的方法时发生此错误，但我使用的是 => ES6 语法，我认为它不需要这个？我什至尝试将绑定添加到父组件，如下所示： this.handleChargesDateChange = this.handleChargesDateChange.bind(this);

但这同样不起作用。我尝试了以下资源，但没有运气：

将道具传递给孩子

OnCHange 不是函数

有人可以解释我哪里出错了吗？我本本尝试了几个小时，但没有运气：/

谢谢！

标签： reactjs

reactjs - 将方法作为道具传递给子组件时，React onChange 不是函数

问题描述

解决方案

推荐阅读