Javascript Todo React JS应用程序1

需要创建一个React应用程序，为用户显示文本输入，用户可以在输入旁边显示一个按钮来编写任务。单击此按钮时，应将用户的输入添加到待办事项列表中。不应将空白项添加到列表中。每个列表项都必须显示一个复选框，以及用户编写的任务。勾选复选框时，应将列表项从列表中删除。此外，我还得到以下错误： 我的代码：

App.js:
从“React”导入React，{Component}；
从“/MyList.js”导入MyList；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={task}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
const name=e.target.name；
const value=e.target.type==“复选框”？e.target.checked:e.target.value；
this.setState（{[name]：value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
console.log（'SUBMITTED'，this.state）；
}
render（）{
返回(
);
}
}
导出默认应用程序；
MyList.js：
从“React”导入React，{Component}；
从“/App.js”导入应用程序；
类MyList扩展组件{
建造师（道具）{
超级（道具）；
this.state={task}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
const name=e.target.name；
const value=e.target.type==“复选框”？e.target.checked:e.target.value；
this.setState（{[name]：value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
console.log（'SUBMITTED'，this.state）；
}
渲染（）{
返回(
我的任务列表
添加


{this.handleChange}
);
}
}
导出默认MyList首先，您需要使用初始值初始化任务状态，该初始值可以是
null
或空字符串，如下所示：

this.state = { task : '' }

其次，必须将
this.handleChange
方法放在输入的
onChange
上，如下所示：

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

。

有关更多详细信息，请查看代码：


类ListItem扩展了React.Component{
渲染（）{
返回(

{this.props.text}

)
}
}
类MyList扩展了React.Component{
render（）{
返回(

{this.props.tasks.map（task=>{
返回this.props.deleteListItem（task.id）}/>；
})}

);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
任务：[]
};
this.input=null；
}
增补列表（e）{
//将该项附加到任务数组
this.setState（（prevState）=>({
任务：[
…国家任务，
{
id:new Date（）.getTime（），
text:this.input.value
}
]
}))
}
deleteItem（itemId）{
this.setState（（prevState）=>({
任务：prevState.tasks.filter（（项）=>item.id！==itemId）
}))
}
render（）{
返回(
我的任务列表
{this.input=ref}}type=“text”/>
添加
this.deleteItem（itemId）}
/>
);
}
}
常量样式={
fontFamily:'无衬线'，
textAlign:'中心'，
};
ReactDOM.render（，document.getElementById（'root'））

明白了，但仍然不明白如何使用复选框实现实际列表，单击该复选框，任务将被删除。导致以下错误：TypeError:无法读取undefined的属性“map”。很抱歉，我忘了更新答案中的链接，请现在重新检查如果我将代码放在App.js文件中是否需要更改代码？这取决于您的项目文件结构。请注意index.js底部的render方法（可能您需要删除它），这里并不清楚您想问什么。您发布的代码没有您在问题的前半部分询问的任何功能，并且您收到了一个您甚至没有在问题正文中写入的错误（屏幕截图很少用于显示错误消息）。如果您的目标是解决错误，那么发布错误文本将有所帮助。相反，如果您的目标是获得实现帮助，那么您的问题会让人感觉太宽泛。因此，您似乎已经将收到的答案合并到代码中，并更改了问题。请不要那样做。你基本上让回答者的工作看起来很傻，因为其他人看到的答案已经在问题中了。如果你有一个新问题，问一个新问题。你可以参考这个问题，但要确保新问题是独立的。