我想要的是,基本上,当我单击复选框时,它应该仅禁用该特定待办事项的编辑按钮,但是,当我单击复选框时,它会禁用待办事项列表的整个编辑按钮。有人可以建议我吗?
class App extends Component {
state = {
disable: false
}
handleCheckBox = () => {
this.setState({disable: !this.state.disable})
}
render() {
const {data: {loading, todos}} = this.props;
if(loading) {
return null;
}
return (
<div style={{display: "flex"}}>
<div style={{margin: "auto", width: 400 }}>
<Paper elevation={1}>
<Form submit={this.createTodo}/>
<List>
{todos.map(todo => (
<ListItem
key={todo.id}
role={undefined}
dense
button
onClick={() => this.updateTodo(todo)}
>
<Checkbox
onClick={this.handleCheckBox}
checked={todo.complete}
tabIndex={-1}
disableRipple
/>
<ListItemText primary={todo.text} />
<ListItemSecondaryAction>
<Button mini color="secondary" variant="fab" disabled={this.state.disable}>
<Icon>edit_icon</Icon>
</Button>
<IconButton onClick={() => this.removeTodo(todo)}>
<CloseIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</List>
))}
</List>
</Paper>
</div>
</div>
);
}
}
最佳答案
您可以创建一个包含禁用状态的 map /对象,其中 ids 作为键,true/false 作为值。
state = { buttons = { } };
handleCheckBox = id => {
const state = { buttons: {...this.state.buttons, id: !this.state.buttons[id] }};
this.setState(state);
}
<Button mini color="secondary" variant="fab" disabled={!this.state.buttons[todo.id]}>
关于javascript - 如何仅禁用一个编辑按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51119011/