时间戳

首页 > 解决方案 > 将 onChange 事件从映射的子级传递到父级的状态会返回“未定义”错误

javascript - 将 onChange 事件从映射的子级传递到父级的状态会返回“未定义”错误

问题描述

你好[来自反应初学者]。试图将孩子的输入值传递给父状态。

所以，App 有一个数组：

export default class App extends React.Component {
    state = {
        data: [
            {id: 1, name: 'john'},
            {id: 2, name: 'doe'},
        ]
    }

    render() {
        return (
            <List data={this.state.data}/>
        )
    }
}

然后 List 将 prop.data 作为 state.data 并在 map 中返回子项：

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data
        };
        this.parentChange = this.parentChange.bind(this);
    }

    renderList() {
        const data = this.state.data;
        let list = null;

        if (data.length) {
            list = data.map(function(item, index){
                return (<Item key={item.id} data={item} onChange={(e, index) => this.parentChange(e, index)} />)
            });
        } else {
            list = <p>nothing here</p>
        }
        return list;
    }

    parentChange(value, index) {
        // pls give me anything
        console.log('--- value: ', value);
        console.log('--- index: ', index);
    }

    render() {
        return (
            <div>{this.renderList()}</div>
        )
    }
}

和项目孩子：

class Item extends React.Component {
    render() {
        const {id, name} = this.props.data;

        return (
            <div>
                <input id={id} value={name} onChange={(e) => this.props.onChange(e, id)} />
            </div>
        )
    }
}

但是，如果我更改任何输入的值，则会出现错误

Cannot read property 'parentChange' of undefined

感谢您的任何帮助（代码、链接等）

标签： javascriptreactjs

解决方案

您正在使用function关键字声明一个函数：

if (data.length) {
  list = data.map(function(item, index){
         return (<Item key={item.id} data={item} onChange={(e, index) => 
                this.parentChange(e, index)} />)
  });
}

使用function关键字声明函数将在其内部创建另一个上下文，因此您的this（上下文）将不再是类上下文。

IDE 可能不会警告您，但是当它运行时，JS 在您的函数内创建另一个上下文会导致未定义的错误。

所以需要改成：

if (data.length) {
  list = data.map((item, index) => {
         return (<Item key={item.id} data={item} onChange={(e, index) => 
                this.parentChange(e, index)} />)
  });
}

推荐阅读