React App - 试图控制动态创建的 material-ui TextInput's，但没有成功。

Question

每当我在输入字段中输入任何内容时，我都会收到 "TypeError: 每当我在输入字段中输入任何内容时，都会收到 "TypeError: Cannot read property 'target' of undefined"。下面是在父组件中错误所指的代码。

handleCertificationChange = (index, e) => {
   let certifications = [...this.state.certifications];
   certifications[index] = {...certifications[index], [e.target.name]: e.target.value};
   this.setState({ certifications });
}

我的初始状态。

this.state = {
   certifications: [{ certification: '' }]
}

下面是我在子组件中调用TextField的方法。

renderCertificationFields = () => {
        const { certifications } = this.props.values;
        const { handleCertificationChange } = this.props; //receiving as props from parent component

        return certifications.map((item, index) => (
            <Grid container spacing={1} key={index}>    
                <Grid item md={10}>
                    <TextField
                        label='Certification name'
                        name='certification'
                        onChange={(index, event) => handleCertificationChange(index, event)}
                        defaultValue={item.certification || ''}
                    />
                </Grid>
            </Grid>
        ))
    }

感谢任何帮助

Answer 1

在JSX中， event 对象中的第一个也是唯一一个参数。onChange 回调--所以您不需要定义 index 的回调中，只对自己的方法。

onChange={(event) => handleCertificationChange(index, event)}