功能:从input输入框中输入内容,点击提交就会在下面展示出来;点击下面展示的内容,对应的展示内容就会被删除。
import React, {useState} from 'react';
function App(){
const [inputValue, valueChange] = useState("");
const [lists, submitClick] = useState([]);
const testClick =()=>{
valueChange("");
submitClick([...lists, inputValue])
};
const liClick = function (e) {
lists.splice(e,1);
submitClick([...lists])
};
return (
<div className="App">
<input
value={inputValue}
onChange={(e)=>valueChange(e.target.value)} />
<button onClick={testClick}>提交</button>
<ul>
{lists.map((item,index)=>
<li key={index} onClick={(e)=>liClick(index)}>{item}</li>
)}
</ul>
</div>
);
}
export default App;