Tengo una aplicación de tareas sencilla que toma la entrada del usuario a través de un aviso y la agrega a una lista. Quiero cambiar el indicador y reemplazarlo con una barra de entrada de texto. He tenido problemas para implementar onChange y estoy chocando contra una pared tratando de resolver esto. Realmente aprecio la ayuda como un principiante tratando de aprender.
import React, { useState } from 'react'; let id = 0 const Todo = props => ( <li> <input type="checkbox" checked={props.todo.checked} onChange={props.onToggle} /> <button onClick = {props.onDelete}> delete</button> <span>{props.todo.text}</span> </li> ) class App extends React.Component { constructor() { super() this.state = { todos: [], } } addTodo() { const text = prompt("TODO TEXT PLEASE!") this.setState({ todos: [...this.state.todos, {id: id++, text: text, checked: false}, ] }) } removeTodo(id) { this.setState({ todos: this.state.todos.filter(todo => todo.id !== id ) }) } toggleTodo(id) { this.setState({ todos: this.state.todos.map(todo => { if (todo.id !== id) return todo return { id: todo.id, text: todo.text, checked: !todo.checked, } }) }) } render() { return ( <div> <div> Todo Count: {this.state.todos.length}</div> <div> Unchecked Count: {this.state.todos.filter(todo => !todo.checked).length} </div> <div className="App"> <label> Task Name:</label> <input type="text" id="task" /* onChange={(e)=> { setTaskName(e.target.value);*/ /> <button onClick={() => this.addTodo()}> Add ToDo </button> </div> <ul> {this.state.todos.map(todo => ( <Todo onToggle={() => this.toggleTodo(todo.id)} onDelete={() => this.removeTodo(todo.id)} todo={todo} /> ))} </ul> </div> ) } }Para resolver este problema que tiene, también deberá agregar un estado local para almacenar los datos de su campo de entrada (puede obtener esto con enfoques controlados o no controlados ):
this.state = { currentTodo: "", todos: [], } Y luego, en su evento de entrada onChange como ya lo hizo (aunque estaba usando un enfoque basado en gancho), podría agregar una actualización de estado para su valor currentTodo de Todo mientras escribe. Y también el valor del estado actual en la etiqueta de input (como observó Cesare ):
<input type="text" id="task" value={this.state.currentTodo} onChange={(e)=> { this.setState({ ...this.state, currentTodo: e.target.value}); } /> Finalmente, para obtener el texto escrito puedes obtenerlo en tu método addTodo .
const text = this.state.currentTodo;