javascript - react.js 的一些问题
问题描述
我最近在做react.js,现在有两个问题:
文件结构就像
>public
>src
>components
>img
x.png
Item.js
App.js
index.js
项目.js:
import React from 'react';
class Item extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<li className="todo-app__item">
<div className="todo-app__checkbox">
<input type="checkbox" id={this.props.num}
checked={this.props.completed} onClick = {this.props.onClick}/>
<label htmlFor={this.props.num}></label>
</div>
<h1 className="todo-app__item-detail">{this.props.text}</h1>
<img src='./components/img/x.png' className="todo-app__item-x"/>
</li>
);
}
}
export default Item;
应用程序.js
import './App.css';
import React from 'react';
import Item from './components/Item.js';
class Main extends React.Component{
constructor(props){
super(props);
this.state={tasks: []}
}
handleKeyDown = (e)=>{
if (e.key === 'Enter') {
this.setState (prevState => ({
tasks: [...prevState.tasks, {content: e.target.value, completed: false}]
}));
}
}
handleClick = (e) =>{
this.setState (prevState => {
let newTasks = prevState.tasks.slice();
newTasks[e].completed = !prevState.tasks[e].completed;
return{tasks: newTasks};
})
}
/*displayAll = () =>{
}
displayActive = () =>{
}
displayCompleted = () =>{
}
deleteCompleted = () =>{
}*/
render(){
return(
<section className="todo-app__main">
<input className="todo-app__input"
placeholder="What needs to be done?" onKeyDown={this.handleKeyDown} />
<ul className="todo-app__list" id="todo-list">
{this.state.tasks.map(item =>
<Item num={this.state.tasks.indexOf(item)} text={item.content} completed={item.completed}
onClick={() => this.handleClick(this.state.tasks.indexOf(item))}/>)}
</ul>
<footer className="todo-app__footer" id="todo-footer">
<div className="todo-app__total"> {this.state.tasks.filter(e=>e.completed===false).length} Left</div>
<ul className="todo-app__view-buttons">
<button>All</button>
<button>Active</button>
<button>Complete</button>
</ul>
<div className="todo-app__clean">
<button>Clear complete</button>
</div>
</footer>
</section>
);
}
}
- 我
x.png
的显示不正确。如何解决? - 底部的三个按钮,我希望可以在不删除项目的情况下
completed
显示满足 task[1]=true 的任务。我该如何实施?
解决方案
- 可以修改img的src属性,现在相对路径不对
<img src='./img/x.png' className="todo-app__item-x"/>
- 使用反应状态来渲染不同的按钮
{this.state.tasks[x].completed && <button>Complete</button>}
eg:当任务x完成时,显示按钮。
推荐阅读
- debugging - 如何在没有客户提供的任何可执行文件的情况下调试核心文件
- database - SpringBoot中数据实体的异常类:全局异常类还是每个实体单独的异常类?
- django - 授权和获取访问令牌后如何将用户传回前端客户端?
- swift - Swift 5 中的日期格式
- python - 在 Python 中为指数值获取不正确的最大值和最小值
- maven - 由于我工作的网络,我无法创建 Spring Boot 项目
- javascript - 有没有办法在不使用画布的情况下实现图像颜色选择 javascript?
- amazon-web-services - 如何在 EMR 槽端口 443 上暴露 Hive?
- node.js - 无法使用 docker-compose 甚至使用 docker 文件将 formio 代码托管到天蓝色
- python - rpy2转换->将python dict传递给R中的...参数