[英]How to change <td> tag into <input> active tag in react.js using button?
In the given code below, there is td tag which includes input tag inside it.在下面给定的代码中,有一个td标签,其中包含input标签。 I have disabled it initially so that the user can't change the data.我最初已将其禁用,以便用户无法更改数据。 Because of this if the data inside it is more than 2 lines or something then all of it will not be visible.因此,如果其中的数据超过 2 行或其他内容,那么所有数据都将不可见。
1) I want to make data fit as per its length, like 'textarea'. 1)我想让数据适合它的长度,比如'textarea'。 2) In the end, there is an "Edit" button, when I click on that button all the td tags should become input tags. 2)最后,有一个“编辑”按钮,当我点击那个按钮时,所有的td标签都应该变成输入标签。 Therefore I should be able to edit the data inside it.因此我应该能够编辑其中的数据。 Please can anyone help me with this?请问有人可以帮我吗? I want to achieve this using react.js Thank you in advance.我想用 react.js 来实现这个提前谢谢你。
import React, {useEffect, useState} from 'react';
import '../src/tabledata.css';
function TableData() {
const [data, getData] = useState([])
useEffect(() => {
fetchData()
},[])
const fetchData = () => {
fetch("/api")
.then((res) =>
res.json())
.then((response) => {
console.log(response);
getData(response);
})
}
function edit() {
}
return (
// whole body
<div className='body'>
<h1 className='heading'>GCP DOCUMENT AI DATA</h1> {/* heading */}
<div> {/* container for table */}
<div className='tbl'> {/* div for table inside container */}
<tbody>
<tr> {/* headings in table */}
<th>Keys</th>
<th>Values</th>
</tr>
{data.map((item,i) => (
<tr key={i}> {/* 1st column keys and 2nd column values */}
<td>{item.keys}</td>
<td><input className='tdValueInput' type="text" value={item.values} disabled/></td>
</tr>
))}
<div> {/* div for buttons */}
<input type="submit" className='bttn-edit' value="Edit" onClick={edit}/>
<input type="submit" className='bttn-approve' value="Approve"/>
</div>
</tbody>
</div>
</div>
</div>
);
}
export default TableData;
You need to do few things:你需要做几件事:
const [isEditing, setEditing] = useState(false);
setEditing(true);
<td>
vs <input>
based on isEditing
variable您需要根据isEditing
变量更改<td>
与<input>
的渲染{isEditing ? <td>{item.values}</td> : <td><input value={item.values} /></td>}
onChange
prop for input to change edited data您需要为输入添加onChange
道具以更改编辑的数据<input value={item.values} onChange={(e) => item.values = e.target.value} />
You have invalid HTML structure - missing <table>
and mixing <div>
with <tr>
element on same level您有无效的 HTML 结构 - 缺少<table>
并将<div>
与<tr>
元素混合在同一级别
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.