您好,登录后才能下订单哦!
怎么在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功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。