用function组件和hooks实现todoList的效果:
功能实现步骤:
1.在文本框中输入内容,点击添加按钮,将内容加入列表中并展示;
2.点击每个item后的删除按钮删除该item,在视图中更新。
import React, {useState, useRef} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let [arr, setArr] = useState([]);
let inputRef = useRef();
// 点击按钮添加元素到数组中
const add = () => {
// 这里不能直接push,需要展开数组元素并添加新元素,组成一个新数组
setArr([...arr, inputRef.current.value]);
// 清空输入框
inputRef.current.value = '';
}
// 删除元素
const delItem = (index) => {
arr.splice(index, 1);
// 引用类型内存地址没改变,需要[...arr]改变内存地址,才会引发视图更新
setArr([...arr]);
}
return (
<React.Fragment>
<input ref={inputRef} placeholder='请输入要添加的内容'/>
<button onClick={add}>添加</button>
<br/>
<ul>
{
arr.map((item, index) =>
<li key={index}>{item}
{/*这里用箭头函数包裹,否则会在dom渲染时就触发事件函数*/}
<button onClick={() => delItem(index)}>删除</button>
</li>
)
}
</ul>
</React.Fragment>
);
}
export default App;
完成。非常简单,但需要注意的细节很多。