React实现todolist功能
(编辑：jimmy 日期: 2024/12/22 浏览：2)
一、index.js
ReactDOM.render(
<React.StrictMode>
<TodoList />
</React.StrictMode>,
document.getElementById('root')
);
二、TodoList
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('发生错误')
})
}
这样运行程序的时候初始值就有了数据了。
总结：当前组件的state或者prop发生改变的时候，App中的render函数就会重新执行。做到数据和页面同步。当父组件发生变化重新执行的时候，子组件的render也会被重新执行一次。