В Chrome, нажав кнопку «Первой кнопкой todo» и закрыв ее, нажав кнопку «закрыть», после нажатия кнопки «Редактировать» «Второе todo» будет рендерить textarea на First todo, а также сохранить его, а также после нажатия кнопки редактирования закрыть клик не будет работать в Firefox, может кто-нибудь спросить, что не так, и что можно сделать? Спасибо!
class Form extends Component {
constructor(props) {
super(props);
this.state = {
text: "",
val: [],
close: [],
closeObj: {id: '', isEdit: false},
idChk: 0
}
}
handleEditClick = (e,id,text) => {
let { val, close, closeObj, idChk } = this.state;
val.push(id);
this.setState({val});
closeObj = Object.assign({}, closeObj);
let chkId = close.findIndex(obj => {
if(obj.id === id) {
return id
}
})
if(chkId === -1) {
closeObj.id = id;
closeObj.isEdit = !closeObj.isEdit;
this.setState({closeObj});
close.push(closeObj);
}else {
close[chkId].isEdit = !close[chkId].isEdit;
this.setState({closeObj, close});
}
this.setState({closeObj: {id: '', isEdit: false}, idChk: id});
}
handleCloseClick = id => {
let { close } = this.state;
for(var i in close) {
if(close[i].id === id) {
close[i].isEdit = !close[i].isEdit;
this.setState({close, idChk: id});
}
}
}
renderEdit(text, id) {
return (
<div>
<TextField
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
label=""
margin="normal"
value={text}
color="secondary"
/>
<Button variant="contained" size="small" style={{color: 'green'}}>
<SaveIcon />
</Button>
<IconButton>
<CloseIcon onClick={() => this.handleCloseClick(id)}/>
</IconButton>
</div>
)
}
render() {
const { text, idChk, close } = this.state;
let closeBool = false;
if( close.length !== 0 ) {
for (var i in close ) {
if(idChk === close[i].id) {
closeBool = close[i].isEdit;
}
}
}
return (
<div style={{display: "flex"}}>
<div style={{margin: "auto", width: 400 }}>
<TextField
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
label=""
margin="normal"
fullWidth
value={text}
color="secondary"
/>
<Paper elevation={1}>
<div>
{this.props.todos.map(todo => (
<div key={todo.id}>
{
( this.state.val.includes(todo.id) && closeBool) ? this.renderEdit(todo.text, todo.id):
<EditButton todo={todo} val={val} text={text} close={this.state.close}
removeTodo={(todo) => this.removeTodo(todo)}
handleEditClick={(e, id, text) => this.handleEditClick(e, id, text)}
updateTodo={(todo) => this.updateTodo(todo)}
/>
}
</div>
))}
</div>
</Paper>
</div>
</div>
)
}
}