Esta es la respuesta más exacta que encomtrarás compartir, pero mírala pausadamente y analiza si se puede adaptar a tu trabajo.
Solución:
Para eliminar los elementos pendientes, primero pase una función del componente principal:
Enlace esta función en el constructor:
this.removeTodo = this.removeTodo.bind(this);
Defina esta función en el componente principal, eliminará ese elemento de state variable:
removeTodo(name)
this.setState(
todo: this.state.todo.filter(el => el !== name)
)
Luego, dentro del componente secundario, llame a este método para eliminar todo:
export default class TodoList extends Component
removeItem(e)
this.props.removeTodo(item);
render()
return(
this.props.todos.map((todo) =>
return - this.removeItem(todo) key=todo> todo
)
);
Sugerencia:
no llames setState varias veces dentro de un function si desea establecer varios state valores luego escríbalo así:
this.setState(
a: value1,
b: value2,
c: value3
)
Ejemplo de trabajo:
class Todos extends React.Component
constructor(props)
super(props);
this.state = todos: [], text: '' ;
this.removeTodo = this.removeTodo.bind(this);
addTodo(e)
e.preventDefault();
this.setState(
todos: [ this.state.text, ...this.state.todos ],
text: ''
);
removeTodo(name, i)
let todos = this.state.todos.slice();
todos.splice(i, 1);
this.setState(
todos
);
updateValue(e)
this.setState( text: e.target.value)
render()
return(
);
class TodoList extends React.Component
removeItem(item, i)
this.props.removeTodo(item, i);
render()
return(
this.props.todos.map((todo,i) =>
return - this.removeItem(todo, i) key=i> todo
)
);
ReactDOM.render(
Actualizar:
Esto es para la duda de @whs.bsmith, el código que sugerí funcionará correctamente en el caso de que el usuario agregue los elementos únicos en la lista de tareas pendientes, si intenta agregar el mismo elemento, no se reflejará en la interfaz de usuario porque OP es utilizando el nombre de elementos de tareas pendientes como el key y key debería ser único.
Para resolver ese problema:
En el fragmento de trabajo, utilicé índices en lugar del nombre de los elementos de tareas pendientes para keyeso funcionará correctamente y le permitirá al usuario agregar el mismo elemento varias veces y, al eliminarlo, eliminará solo ese elemento específico, no todos los elementos que tienen el mismo nombre, pero no es una buena idea usar índices como el key.
has llamado establecerestado dos veces en el añadirTodo función. Puedes configurar todos y texto en una sola función setState como esta:
addTodo(e)
e.preventDefault();
this.setState( todos: [ this.state.text, ...this.state.todos ], text: '' );
No escriba remover el artículo función en Lista de quehaceres Componente ya que está trabajando puramente en accesorios. pasar un remover el artículo función de Todos y elimine ese elemento en la función removeItem de Todos de esta manera:
import React, Component from 'react'
export default class Todos extends Component
constructor(props)
super(props);
this.state = todos: [], text: '' ;
this.removeItem = this.removeItem.bind(this)
addTodo(e)
e.preventDefault();
this.setState( todos: [ this.state.text, ...this.state.todos ], text: '' );
updateValue(e)
this.setState( text: [e.target.value])
removeItem(index)
const todos = this.state.todos.filter((todo, todoIndex) =>
return todoIndex !== index
)
this.setState( todos )
render()
return(
this.props.todos.map((todo, index) =>
return - this.props.removeItem(index) key=todo> todo
)
);
Espero eso ayude.
Te invitamos a añadir valor a nuestra información añadiendo tu experiencia en las notas.