您好,登錄后才能下訂單哦!
怎么在React中實現(xiàn)一個todolist功能?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
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標(biāo)簽的作用,擴大點擊范圍*/} <label htmlFor='insertArea'>輸入內(nèi)容</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、事件函數(shù)
/** * 監(jiān)聽輸入框變化 **/ handleInputChangle(e) { const value = e.target.value; this.setState(() => ({ inputValue: value })) } /** * 監(jiān)聽點擊按鈕 **/ handleButtonVlue(e) { this.setState((prevStatus) => ({ list: [...prevStatus.list, this.state.inputValue], inputValue: '' })) } /** * 監(jiān)聽點擊item刪除 **/ handleItemDelete(index) { this.setState((preStatus) => { const list = [...preStatus.list]; list.splice(index, 1) return { list } }); }
5、網(wǎng)絡(luò)請求
使用Charles代理網(wǎng)絡(luò),安裝證書,設(shè)置端口,在手機上面打開網(wǎng)絡(luò)WIFI,設(shè)置代理IP和端口,這樣就能監(jiān)聽到手機訪問的網(wǎng)絡(luò),攔截請求,代理本地地址,返回本地數(shù)據(jù)。
需要注意的是charles識別不出來localhost,需要在package.json中改成設(shè)置:
* "start": "set PORT=3000 HOST=localhost.charlesproxy.com && react-scripts start",
訪問時候使用:
http://localhost.charlesproxy.com:3000/
(1)引入axios
yarn yarn add axios
(2)在componentDidMount進行網(wǎng)絡(luò)請求
/** * 這塊進行網(wǎng)絡(luò)請求 */ componentDidMount() { axios.get('api/todolist') .then((res) => { this.setState({ list: [...res.data] }) }).catch(() => { alert('發(fā)生錯誤') }) }
看完上述內(nèi)容,你們掌握怎么在React中實現(xiàn)一個todolist功能的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。