怎么在React中实现一个todolist功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
ReactDOM.render(
<React.StrictMode>
<TodoList />
</React.StrictMode>,
document.getElementById('root')
);
1、constructor
constructor(props) {
super(props);
this.state = {
inputValue: '',
list: []
}
}
2、render
render() {
return (
<React.Fragment>
<div>
{/*label标签的作用,扩大点击范围*/}
<label htmlFor='insertArea'>输入内容</label>
<input
id='insertArea'
className={'inputStyle'}
value={this.state.inputValue}
onChange={event => this.handleInputChangle(event)}/>
<button onClick={event => this.handleButtonVlue(event)}>提交</button>
<hr/>
<ul>
{this.getTodoList()}
</ul>
</div>
</React.Fragment>
)
}
3、getTodoList
getTodoList() {
return (
this.state.list.map((value, index) => {
return <TodoItem2
key={index}
itemVlue={value}
itemIndex={index}
itemDelete={this.handleItemDelete.bind(this)}>
{/*这块需要强制绑定为父组件的this,否则在子组件中找不到*/}
</TodoItem2>
})
);
}
4、事件函数
/**
* 监听输入框变化
**/
handleInputChangle(e) {
const value = e.target.value;
this.setState(() => ({
inputValue: value
}))
}
/**
* 监听点击按钮
**/
handleButtonVlue(e) {
this.setState((prevStatus) => ({
list: [...prevStatus.list, this.state.inputValue],
inputValue: ''
}))
}
/**
* 监听点击item删除
**/
handleItemDelete(index) {
this.setState((preStatus) => {
const list = [...preStatus.list];
list.splice(index, 1)
return {
list
}
});
}
5、网络请求
使用Charles代理网络,安装证书,设置端口,在手机上面打开网络WIFI,设置代理IP和端口,这样就能监听到手机访问的网络,拦截请求,代理本地地址,返回本地数据。
需要注意的是charles识别不出来localhost,需要在package.json中改成设置:
* "start": "set PORT=3000 HOST=localhost.charlesproxy.com && react-scripts start",
访问时候使用:
http://localhost.charlesproxy.com:3000/
(1)引入axios
yarn yarn add axios
(2)在componentDidMount进行网络请求
/**
* 这块进行网络请求
*/
componentDidMount() {
axios.get('api/todolist')
.then((res) => {
this.setState({
list: [...res.data]
})
}).catch(() => {
alert('发生错误')
})
}
看完上述内容,你们掌握怎么在React中实现一个todolist功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。