[英]How to update the value from todo list : when click on update button value should get edited on text field and should get updated to same index
React Todo list : I want to update the text when click on update button.when update button is clicked the value should get appeared on text field from where the text is added and again after editing the value,the value should get updated on same index after clicking on add button. React Todo list:我想在单击更新按钮时更新文本。单击更新按钮时,该值应该出现在添加文本的文本字段中,并在编辑该值后再次在相同的索引上更新该值单击添加按钮后。
import React from 'react';
class Todo extends React.Component{
constructor(props){
super(props);
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.handleClick= this.handleClick.bind(this);
this.state={
todoList:[],
todoString:"",
a:''
}
};
onChange(event)
{
this.setState({todoString:event.target.value});
}
onSubmit()
{
let todoList = this.state.todoList;
let todoObject = {"todoText":this.state.todoString, "isDone": false, "isUpdated":false};
todoList.push(todoObject); // todo-object is push in todolist
this.setState({todoList:todoList,todoString:''});
}
handleClick(todoItem) {
todoItem.isDone = true;
this.setState({todoList:this.state.todoList});
}
updatedClick(value) {
this.setState({todoString: value.todoText});
}
render()
{
return(
<div>
<div>{
}
<input value={this.state.todoString} onChange={(e) => this.onChange(e)}/> <button onClick={(e) =>this.onSubmit(e)}> Add </button>
{
this.state.todoList.map((value, index) => {
return(
<div>
{value.isDone === true ? <span style={{'text-decoration':'line-through','padding':'10px'}}>{value.todoText}</span>: <span>{value.todoText}</span>}
<button onClick={()=>this.handleClick(value)}> Mark Done</button>
<button onClick={(e)=>this.updatedClick(value)}> update</button>
</div>
)
})
}
</div>
</div>
)
}
}
export default Todo;
we have to use one extra property in state for insert/update mode. 我们必须在状态中为插入/更新模式使用一个额外的属性。 on update click we will set index for element that is going to be updated and if index is set and not equal to -1 then we are in edit mode else we use insert mode. 在更新单击时,我们将为要更新的元素设置索引,如果设置了索引并且不等于-1,则说明我们处于编辑模式,否则使用插入模式。
class Todo extends React.Component{
constructor(props){
super(props);
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.handleClick= this.handleClick.bind(this);
this.state={
todoList:[],
todoString:"",
editIndex : -1 // init with insert mode.
}
};
onChange(event) { this.setState({todoString:event.target.value}); }
onSubmit() {
let todoList = this.state.todoList;
if(this.state.editIndex != -1) { // update mode
todoList[this.state.editIndex].todoText = this.state.todoString;
} else { // insert mode
let todoObject = {"todoText" : this.state.todoString, "isDone": false, "isUpdated":false};
todoList = [...todoList , todoObject];
}
this.setState({todoList:[...todoList] , todoString:'' , editIndex : -1 }); // reset insert mode
}
handleClick(todoItem) { // improved for toggling insted of only mark as done.
todoItem.isDone = !todoItem.isDone;
this.setState({todoList:[...this.state.todoList]});
}
updatedClick(value) { // set update mode
let i = this.state.todoList.findIndex(l => {return l.todoText == value.todoText});
this.setState({editIndex : i, todoString : value.todoText});
}
render()
{
return(
<div>
<div>
<input value={this.state.todoString} onChange={(e) => this.onChange(e)}/> <button onClick={(e) =>this.onSubmit(e)}> Add </button>
{
this.state.todoList.map((value, index) => {
return(
<div>
{
value.isDone === true ?
<span style={{'text-decoration':'line-through','padding':'10px'}}>{value.todoText}</span> :
<span>{value.todoText}</span> }
<button onClick={()=>this.handleClick(value)}> Toggle</button>
<button onClick={(e)=>this.updatedClick(value)}> update</button>
</div>
)
})
}
</div>
</div>
)
}
}
export default Todo;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.