如何解决我如何定位被点击的 React 组件
我想在单击时更改组件的类。我使用 state 创建一个具有 name 和 done 属性的新组件(创建时为 false)。然后将其推送到 todos 数组中。 现在的问题是如何找到点击了哪个组件并将其“完成”属性更改为 !done ?
function App() {
const [todos,setTodos] = useState([])
const [newTodo,setNewTodo] = useState({
name: "",done: false
})
const handleInput = (event) => {
setNewTodo({name: event.target.value})
}
const handleDone = (event) => {
//WHAT TO DO HERE
}
const submitTodo = (event) => {
event.preventDefault();
setTodos([...todos,newTodo.name])
console.log(newTodo.name)
setNewTodo({name: ""})
}
return (
<div className="App">
<form onSubmit={submitTodo}>
<input onChange={handleInput} value={newTodo.name}/>
<button>Add Todo!</button>
</form>
<ul>
{todos.map(todo => (
<li className={/*Change the class based on the DONE property*/} onClick={handleDone}>{todo}</li>
))}
</ul>
</div>
);
}
export default App;
解决方法
改变你的新Todo状态
const [newTodo,setNewTodo] = useState('');
const [show,setShow] = useState(false);
const handleDone = (event) => setShow(!show)
.....
.....
.....
<li className={show ? 'classname when show is true': 'classname when show is false'} onClick={handleDone}>{todo}</li>
,
首先,您应该始终使您的待办事项同时包含 name
和 done
属性。有了这个,您只需将待办事项从被点击的 <li>
传递给您的点击处理程序,以便它可以修改其 done 属性并通过更新 todos
状态导致重新渲染。
function App() {
const [todos,setTodos] = useState([])
const [newTodo,setNewTodo] = useState({
name: "",done: false
})
const handleInput = (event) => {
setNewTodo({name: event.target.value,done: false }); // this now adds done property
}
const handleDone = (todo) => {
todo.done = !todo.done;
setTodos([...todos]); // This sets new todos to cause a rerender with updated list
}
const submitTodo = (event) => {
event.preventDefault();
setTodos([...todos,newTodo]) // this now appends entire newTodo item not only it's name
setNewTodo({name: "",done: false}) // this now also sets default done
}
return (
<div className="App">
<form onSubmit={submitTodo}>
<input onChange={handleInput} value={newTodo.name}/>
<button>Add Todo!</button>
</form>
<ul>
{todos.map(todo => (
<li
className={todo.done ? 'classA' : 'classB'}
onClick={() => handleDone(todo)}
>
{todo.name} // this now displays todo.name not todo
</li>
))}
</ul>
</div>
);
}
export default App;
此外,您可以将待办事项和点击处理程序提取到一个单独的组件中:
function ToDo({ item }) {
const [clicked,setClicked] = useState(item.done);
const handleClick = useCallback(() => {
item.done = !clicked
setClicked(!clicked);
},[clicked]);
return <li
className={clicked ? 'classA' : 'classB'}
onClick={handleClick}
>
{item.name}
</li>;
}
然后用你的 App 组件渲染一个组件列表:
<ul>
{todos.map(todo => <ToDo item={todo} />
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。