所以這是我正在嘗試創(chuàng)建的用戶功能：1.）用戶雙擊文本 2.）文本變成用戶可以編輯文本的輸入字段 3.）用戶點(diǎn)擊輸入，提交后，文本被更新以進(jìn)行編輯文本?；旧?，它只是一個(gè)編輯功能，用戶可以在其中更改某些文本塊。所以這是我的問(wèn)題 - 我可以通過(guò)雙擊將文本轉(zhuǎn)換為輸入字段，但是如何獲取提交和呈現(xiàn)的編輯文本？我的父組件 App.js 存儲(chǔ)了更新 App 狀態(tài)的函數(shù)（updateHandler）。更新的信息需要從 Tasks.jsx 組件傳遞，這是處理文本輸入的地方。我還應(yīng)該指出，一些道具正在通過(guò) TaskList 發(fā)送到 Tasks。代碼如下：應(yīng)用程序.jsimport React, {useState} from 'react';import Header from './Header'import Card from './Card'import cardData from './cardData'import Dates from './Dates'import Tasks from './Tasks'import Footer from './Footer'import TaskList from './TaskList'const jobItems= [ { id:8, chore: 'wash dishes' }, { id:9, chore: 'do laundry' }, { id:10, chore: 'clean bathroom' }]function App() { const [listOfTasks, setTasks] = useState(jobItems) const updateHandler = (task) => { setTasks(listOfTasks.map(item => { if(item.id === task.id) { return { ...item, chore: task.chore } } else { return task } })) }const cardComponents = cardData.map(card => { return <Card key = {card.id} name = {card.name}/>})return ( <div> <Header/> <Dates/> <div className = 'card-container'> {cardComponents} </div> <TaskList jobItems = {listOfTasks} setTasks = {setTasks} updateHandler = {updateHandler}/> <div> <Footer/> </div></div>)}export default App;任務(wù).jsximport React, {useState} from 'react'function Tasks (props) {const [isEditing, setIsEditing] = useState(false) return( <div className = 'tasks-container'> { isEditing ? <form> <input type = 'text' defaultValue = {props.item.chore}/> </form> : <h1 onDoubleClick ={()=> setIsEditing(true)}>{props.item.chore}</h1> } </div> )}export default Tasks任務(wù)列表.jsximport React from 'react'import Tasks from './Tasks'
如何添加在 React 組件中編輯文本的功能？
紫衣仙女
2022-11-03 10:33:24
