使用地图功能时单选按钮选择问题答案

【问题标题】：Radio button select issue, while using Map function使用地图功能时单选按钮选择问题
【发布时间】：2019-10-25 11:30:26
【问题描述】：

我有一个数组列表，我正在使用 map 函数渲染它。每个对象都有一个单选按钮。现在，当我单击数据的单选按钮时，它显示“TypeError：无法读取未定义的属性'值'”。我不明白，我做错了什么。请检查我下面的代码。

从“反应”中导入反应，{组件} 导入 { withStyles, Typography, Grid, Radio } from '@material-ui/core';

class EventSupervisor extends Component {
    constructor(props){
        super(props); 
        this.state = {
            lists: [
                {id: 1, proImg: require("../../../../../assets/images/man-avatar.jpg"), imgAlt: 'Profile Image', name: 'Sam', role: 'Teacher'},
                {id: 2, proImg: require("../../../../../assets/images/man-avatar.jpg"), imgAlt: 'Profile Image', name: 'Sam', role: 'Teacher'},
                {id: 3, proImg: require("../../../../../assets/images/man-avatar.jpg"), imgAlt: 'Profile Image', name: 'Sam', role: 'Teacher'}
            ],
            selectedValue: 1
        }
    }

    handleChange=(e)=>{
        this.setState({
            selectedValue: e.target.value
        })
    }
    render() {
        const { classes } = this.props
        return (
            <div className= {classes.supervisorWrapper}>

                <Grid container>
                    <Grid item xs='6'>
                        <Typography className={classes.selectContent}>Select Supervisor</Typography>
                        {/* <SupervisorList lists={this.state.lists} selectedValue={this.state.selectedValue} onChange={this.handleChange}/> */}
                        {
                this.state.lists.map((list)=> { 
                    return (
                        <div className={classes.superWrapper} key={list.id}>
                            <img src={list.proImg} alt={list.imgAlt} />
                            <Typography className={classes.supervisorName}>{list.name}<span className={classes.supervisorRole}>{list.role}</span></Typography>
                            <Radio 
                                checked = {this.state.selectedValue === list.id}
                                onChange = {()=>this.handleChange(list.id)}
                                value = {this.state.selectedValue}
                                classes={{
                                    root: classes.radioRoot,
                                    checked: classes.rootChecked
                                }}
                            />
                        </div>    
                    )   
                })
            }
                    </Grid>
                    <Grid item xs='6'>

                    </Grid>
                </Grid>
            </div>
        )
    }
}

export default withStyles(styles)(EventSupervisor)

【问题讨论】：

handleChange 函数存在问题。您在 handleChange 而不是事件对象中传递 ID（值）。发布了答案。像这样改变handleChange方法。

标签： javascript reactjs material-ui react-material

【解决方案1】：

handleChange=(id)=>{
    this.setState({
        selectedValue: id
    })
}

【讨论】：

【解决方案2】：

处理更改的函数预期为事件：handleChange(e) --> selectedValue: e.target.value，但在您的 onChange 道具中，您将传递 id：onChange = {()=>this.handleChange(list.id)}

只需更改 handleChange 函数以将 id 作为参数并使用它来设置状态：handleChange(id) ---> selectedValue: id

【讨论】：

【解决方案3】：

<Radio
    ...
    onChange = {(e)=>this.handleChange(e)}
or
    onChange = {this.handleChange}
    ...
/>

点击事件中存在e.target。

【讨论】：