javascript - 如何添加在 React 组件中编辑文本的功能？

Question

所以这是我要创建的用户函数:
1.) 用户双击文本
2.)文本变成用户可以编辑文本的输入字段
3.)用户点击进入，提交后，文本被更新为编辑文本。
基本上，它只是一个编辑功能，用户可以在其中更改某些文本 block 。
所以这是我的问题 - 我可以通过双击将文本转换为输入字段，但是如何获取提交和呈现的编辑文本？
我的父组件 App.js 存储了更新 App 状态的函数(updateHandler)。更新的信息需要从 Tasks.jsx 组件传递，这是处理文本输入的地方。我还应该指出，一些 Prop 正在通过 TaskList 发送到 Tasks。代码如下:
应用程序.js

import 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;

任务.jsx

import 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

任务列表.jsx

import React from 'react'
import Tasks from './Tasks'



function TaskList (props) {

    const settingTasks = props.setTasks //might need 'this'

    return (
        <div>
            {
                props.jobItems.map(item => {
                    return <Tasks key = {item.id} item = {item} setTasks = {settingTasks} jobItems ={props.jobItems} updateHandler = {props.updateHandler}/>
                })
            }
        </div>
    )
}

export default TaskList

Answer 1

您忘记了输入元素上的 onChange 处理程序来设置项目的杂项值。
Tasks.jsx 必须如下所示

import React, {useState} from 'react'

function Tasks (props) {

const [isEditing, setIsEditing] = useState(false)

const handleInputChange = (e)=>{
    // console.log( e.target.value );
    // your awesome stuffs goes here
}

    return(
        <div className = 'tasks-container'>
            {
                isEditing ? 
                <form>
                <input type = 'text' onChange={handleInputChange} defaultValue = {props.item.chore}/> 
                </form>
                : <h1 onDoubleClick ={()=> setIsEditing(true)}>{props.item.chore}</h1>
            }
        </div>
        
    )
}

export default Tasks