Javascript 如何识别数组的某个对象id以更改同一对象中元素的状态？
我试图在阵列中确定展开时的特定面板，并能够将该面板的id连接到按钮，以及在没有展开面板或展开多个面板时禁用按钮。不管什么原因，它根本不接受身份证。另外，我在如何正确禁用按钮方面遇到了问题Javascript 如何识别数组的某个对象id以更改同一对象中元素的状态？,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我试图在阵列中确定展开时的特定面板，并能够将该面板的id连接到按钮，以及在没有展开面板或展开多个面板时禁用按钮。不管什么原因，它根本不接受身份证。另外，我在如何正确禁用按钮方面遇到了问题 export default class WorkoutList extends Component { constructor(props) { super(props); this.state = { workoutlist: [
export default class WorkoutList extends Component {
constructor(props) {
super(props);
this.state = {
workoutlist: [
{
id: uuid.v4(),
name: 'Leg Day',
date: '08/09/19',
duration: 60,
exerciselist: [
{
id: uuid.v4(),
exerciseName: 'Squats',
numberOfSets: 3,
reps: 12,
weight: 135,
},
{
id: uuid.v4(),
exerciseName: 'Leg press',
numberOfSets: 3,
reps: 10,
weight: 150,
},
{
id: uuid.v4(),
exerciseName: 'Lunges',
numberOfSets: 4,
reps: 12,
},
],
selected: false,
},
{
id: uuid.v4(),
name: 'Arm Day',
date: '08/10/19',
duration: 90,
exerciselist: [
{
id: uuid.v4(),
exerciseName: 'Bench Press',
numberOfSets: 5,
reps: 5,
weight: 225,
},
{
id: uuid.v4(),
exerciseName: 'Chest Flies',
numberOfSets: 3,
reps: 10,
weight: 50,
},
{
id: uuid.v4(),
exerciseName: 'Tricep Extensions',
numberOfSets: 4,
reps: 12,
weight: 70,
},
],
selected: false,
},
{
id: uuid.v4(),
name: 'Running',
date: '08/11/19',
duration: 40,
exerciselist: [],
selected: false,
},
],
disabled: false
}
this.handleSelectedPanel = this.handleSelectedPanel.bind(this);
this.handleButton = this.handleButton.bind(this);
}
handleSelectedPanel(id) {
const { workoutlist } = this.state;
this.setState({
workoutlist: workoutlist.map(workout => {
if (workout.id === id) {
workout.selected = !workout.selected
}
return workout;
})
})
}
handleButton(){
const { workoutlist, disabled } = this.state;
let count = 0;
workoutlist.map((workout) => {
if(workout.selected === true) {
count = count + 1;
}
return count;
})
if (count !== 1) {
this.setState({
disabled: true
})
} else {
this.setState({
disabled: false
})
}
return disabled;
}
render() {
const { workoutlist } = this.state;
return (
<div>
<CssBaseline />
<ClientMenuBar title="My Workouts" />
<div style={styles.workoutlist}>
<Paper style={styles.paper} elevation={0}>
{workoutlist.map((workout) => (
<WorkoutItem
key={workout.id}
workout={workout}
onSelectedPanel={this.handleSelectedPanel}
/>
))}
</Paper>
<Button
variant="contained"
color="primary"
size="small"
style={styles.button}
disabled={this.handleButton}
>
Start Workout
</Button>
</div>
</div>
)
}
}
导出默认类WorkoutList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
工作清单：[
{
id:uuid.v4（），
名称：'腿日'，
日期：'08/09/19'，
持续时间：60，
练习表：[
{
id:uuid.v4（），
练习名称：“蹲下”，
数目:3,，
代表：12，
体重：135，
},
{
id:uuid.v4（），
练习名称：'腿部按压'，
数目:3,，
代表：10，
体重：150，
},
{
id:uuid.v4（），
练习名称：“弓箭步”，
数目:4,，
代表：12，
},
],
选择：false，
},
{
id:uuid.v4（），
名称：“武装日”，
日期：'08/10/19'，
持续时间：90，
练习表：[
{
id:uuid.v4（），
练习名称：“台式压力机”，
数目:5,，
代表:5名,，
体重：225，
},
{
id:uuid.v4（），
练习名称：“胸蝇”，
数目:3,，
代表：10，
体重：50，
},
{
id:uuid.v4（），
练习名称：“三头肌延伸”，
数目:4,，
代表：12，
体重：70，
},
],
选择：false，
},
{
id:uuid.v4（），
名称：“正在运行”，
日期：'08/11/19'，
持续时间：40，
练习表：[]，
选择：false，
},
],
禁用：false
}
this.handleSelectedPanel=this.handleSelectedPanel.bind（this）；
this.handleButton=this.handleButton.bind（this）；
}
无手柄选择面板（id）{
const{workoutlist}=this.state；
这是我的国家({
workoutlist:workoutlist.map（锻炼=>{
如果（workout.id==id）{
workout.selected=！workout.selected
}
回程训练；
})
})
}
把手扣（）{
const{workoutlist，disabled}=this.state；
让计数=0；
workoutlist.map（（训练）=>{
如果（workout.selected==真）{
计数=计数+1；
}
返回计数；
})
如果（计数！==1）{
这是我的国家({
残疾人士：对
})
}否则{
这是我的国家({
禁用：false
})
}
返回残疾人；
}
render（）{
const{workoutlist}=this.state；
返回(
{workoutlist.map（（训练）=>(
))}
开始训练
)
}
}
导出默认类WorkUtiItem扩展组件{
建造师（道具）{
超级（道具）；
this.handleSelectedPanel=this.handleSelectedPanel.bind（this）；
}
无手柄选择面板（e）{
此.props.onSelectedPanel（e.target.id）；
}
render（）{
const{id，name，date，duration，exerciselist}=this.props.workout；
返回(
{name}
（{date}）
~{duration}分钟
名称
#集合
代表
重量
{exerciselist.map（（练习）=>(
))}
编辑
)
}
}
已禁用类型
export default class WorkoutItem extends Component {
constructor(props){
super(props);
this.handleSelectedPanel = this.handleSelectedPanel.bind(this);
}
handleSelectedPanel(e) {
this.props.onSelectedPanel(e.target.id);
}
render() {
const { id, name, date, duration, exerciselist } = this.props.workout;
return (
<ExpansionPanel style={styles.panel} id={id} onChange={this.handleSelectedPanel}>
<ExpansionPanelSummary>
<Typography variant="button" style={{ width: "33%" }}>
{name}
</Typography>
<Typography variant="button" style={{ width: "33%" }}>
({date})
</Typography>
<Typography align="right" style={{ width: "33%" }}>
~{duration} mins
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Table size="medium" style={styles.table}>
<TableHead>
<TableRow>
<TableCell padding="none">Name</TableCell>
<TableCell padding="none" align="right"># of sets</TableCell>
<TableCell padding="none" align="right">reps</TableCell>
<TableCell padding="none" align="right">weight</TableCell>
</TableRow>
</TableHead>
<TableBody>
{exerciselist.map((exercise) => (
<ExerciseList
key={exercise.id}
exercise={exercise}
/>
))}
</TableBody>
</Table>
<ExpansionPanelActions disableSpacing style={styles.actionButton}>
<Button color="primary" size="small" disableRipple>
edit
</Button>
</ExpansionPanelActions>
</ExpansionPanelDetails>
</ExpansionPanel>
)
}
}
<Button
variant="contained"
color="primary"
size="small"
style={styles.button}
disabled={this.handleButton}
>
handleSelectedPanel(e) {
this.props.onSelectedPanel(e.target.id);
}
handleSelectedPanel(e) {
this.props.onSelectedPanel(this.props.workout.id);
}