Todo React JS应用程序1

Question

Need to create a React app that would display a text input for the user, where they will be able to write a task with a button displayed beside the input. When clicked, this button should add the user's input to a list of to do items. Blank items should not be added to the list. Each list item must display a checkbox, and the task that the user wrote. When checking off the checkbox, the list item should be removed from the list. Also I'm getting the following error: error message My code:

 App.js: import React, { Component } from 'react'; import MyList from './MyList.js'; class App extends Component { constructor(props) { super(props); this.state = { task }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(e) { const name = e.target.name; const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value; this.setState({ [name]: value }); } handleSubmit(e) { e.preventDefault(); console.log('SUBMITTED', this.state); } render() { return ( <div className="App"> <MyList name="task" currentTask={this.state.task} onSubmit={this.handleSubmit} onChange={this.handleChange} /> </div> ); } } export default App; MyList.js: import React, { Component } from 'react'; import App from "./App.js"; class MyList extends Component { constructor (props) { super(props); this.state = { task }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(e) { const name = e.target.name; const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value; this.setState({ [name]: value }); } handleSubmit(e) { e.preventDefault(); console.log('SUBMITTED', this.state); } render () { return ( <div> My Task List <input type="text" name="task" /> <button onClick={this.handleSubmit}>Add</button> <br /> { this.handleChange } </div > ); } } export default MyList; 

Answer 1

First, you need to initialize the task state with an initial value that can be null or an empty string like so:

this.state = { task : '' }

secondary, you must put the this.handleChange method on the onChange of the input like :

<input type="text" name="task" onChange={this.handleChange} />.

check the code for more details: CodeSandBox

 class ListItem extends React.Component { render (){ return( <li> <input type="checkbox" onChange={this.props.onCheckBoxChange} /> <span>{this.props.text}</span> </li> ) } } class MyList extends React.Component { render() { return ( <ul> {this.props.tasks.map(task => { return <ListItem key={task.id} text={task.text} onCheckBoxChange={()=>this.props.deleteListItem(task.id)} />; })} </ul> ); } } class App extends React.Component { constructor(props) { super(props); this.state = { tasks : [] }; this.input = null; } addItemList(e){ // APPEND THE ITEM TO THE TASKS ARRAY this.setState((prevState) => ({ tasks: [ ...prevState.tasks, { id : new Date().getTime(), text : this.input.value } ] })) } deleteItem(itemId){ this.setState((prevState)=>({ tasks: prevState.tasks.filter((item)=>item.id !== itemId) })) } render() { return ( <div className="App"> <div> My Task List <input ref={(ref)=>{this.input = ref}} type="text" /> <button onClick={this.addItemList.bind(this)}>Add</button> </div> <MyList tasks={this.state.tasks} deleteListItem={(itemId)=>this.deleteItem(itemId)} /> </div> ); } } const styles = { fontFamily: 'sans-serif', textAlign: 'center', }; ReactDOM.render(<App />, document.getElementById('root')); 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>