时间戳

首页 > 解决方案 > 如何转换成反应中的点击

javascript - 如何转换成反应中的点击

问题描述

我想在点击时转换<td>MyData</td>为. 当我单击时，我有完整行的 id。实际上我想在我的代码中添加编辑功能。每当我单击编辑时，它应该将所有输入字段更改为可以更改的输入字段。以下是我的代码。<input value="MyData" /><td>Edit</td><td>Edit</td><td>MyData</td>

function ManagerGrid(props)
{
    function handleClick(value)
    {
        console.log(value)
    }
    const listItems = props.tasks.map((task)=>
    {
        return(
            <tr key={task._id}>
                <td>{task._id}</td>
                <td>{task.title}</td>
                <td>{task.detail}</td>
                <td>{task.assignee}</td>
                <td>{task.time}</td>
                <td onClick={(e)=>{handleClick(task._id)}}>Edit</td>
            </tr>
        )
    })


    return(
        <table id="myTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Detail</th>
                    <th>Assignee</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                {listItems}
            </tbody>
        </table>
    )
}

标签： javascriptreactjs

解决方案

您的渲染代码需要根据其当前状态进行更改，即编辑或不编辑。你需要一个 isEditing 状态。这是一个示例，您必须弄清楚如何保存更改。这是基于钩子的，但您也可以将它与您的道具一起传递并在父组件中跟踪它。

function ManagerGrid(props)
{
    const [editingId, setEditingId] = useState(-1)
    function handleClick(value)
    {
        setEditingId(value)
        // TODO: cancel or save edits
    }
    const listItems = props.tasks.map((task)=>
    {
        if (editingId === task._id) {
        return(
            <tr key={task._id}>
                <td><input value={task._id} /></td>
                <td><input value={task.title} /></td>
                <td><input value={task.detail} /></td>
                <td><input value={task.assignee} /></td>
                <td><input value={task.time} /></td>
                <td onClick={(e)=>{handleSave(/*TODO*/)}}>Save</td>
            </tr>)
         else {
            return (<tr key={task._id}>
                <td>{task._id}</td>
                <td>{task.title}</td>
                <td>{task.detail}</td>
                <td>{task.assignee}</td>
                <td>{task.time}</td>
                <td onClick={(e)=>{handleClick(task._id)}}>Edit</td>
            </tr>)
         }
    })


    return(
        <table id="myTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Detail</th>
                    <th>Assignee</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                {listItems}
            </tbody>
        </table>
    )
}

推荐阅读