单击子组件中的元素更新父组件的状态

Question

Parent Component :

const AddTodo = () => {
    const [todoList, setTodoList] = useState(['No active Todos'])


Child Component:

export const Todos = (props) => {
return (
<i class="material-icons close_icon">
clear
</i>
)

现在，问题是假设 todoList 数组有一些 items/todos 或者即使它是空的。那么，如何在单击 <i> 元素时从 child(Todos) 组件调用 setTodoList 函数来更新 todoList 数组？

Answer 1

通过将 setState 作为 prop 传递，您可以实现此目的：

父组件：

const AddTodo = () => {
    const [todoList, setTodoList] = useState(['No active Todos'])
    return(
        <div>
            {todoList}
            <Todos setTodoList={setTodoList}/>
        </div>
    )
}

子组件：

export const Todos = ({setTodoList}) => {
return (
<i class="material-icons close_icon"
 onClick={()=>setTodoList("")}>
clear
</i>
)
}

单击子组件中的元素更新父组件的状态

Updating a parent component's state on click on an element in child component

reactjs

react-functional-component