我制作了一個包含一些規則的表格，我添加了一個按鈕，以便用戶可以在單擊編輯按鈕時編輯任何行。我只想更改單擊的行而不是所有行。當用戶單擊編輯按鈕時，我還想模糊所需的行。
const[isEditing, setIsEditing] = useState(false)
const onEditHandler = (event:any) =>{
const editedRuleId = (event.target.id);
setIsEditing(!isEditing);
}
<div className='container'>
{Object.entries(rules).map((rule) => (
<div key={rule[0]} className='tbl_rules'>
<div className='box-1'><h6>{rule[0]}</h6></div>
<div contentEditable={isEditing} className='box-2'>{rule[1]}</div>
<div className='box-3'>
<button
id={rule[0]}
type="button"
className="btn btn-sm btn-info"
onClick={onEditHandler}
>{isEditing ? 'Save' : 'Edit'}</button>
</div>
</div>
))}
</div>
uj5u.com熱心網友回復：
最好的方法是讓每一行成為一個獨特的組件。所以你最終會得到如下所示的代碼：
<div className='container'>
{Object.entries(rules).map((rule) => (
<Rule rule={rule}>
))}
</div>
在Rule組件中，您將添加其余代碼，如下所示，這將允許每一行保持自己的狀態：
const[isEditing, setIsEditing] = useState(false)
const onEditHandler = (event:any) => {
const editedRuleId = (event.target.id);
setIsEditing(!isEditing);
}
return (<div key={rule[0]} className='tbl_rules'>
<div className='box-1'><h6>{rule[0]}</h6></div>
<div contentEditable={isEditing} className='box-2'>{rule[1]}</div>
<div className='box-3'>
<button
id={rule[0]}
type="button"
className="btn btn-sm btn-info"
onClick={onEditHandler}
>
{isEditing ? 'Save' : 'Edit'}</button>
</div>
</div>);
uj5u.com熱心網友回復：
const [ selectedCell, setSelectedCell ] = useState(null) ;
<div className='container'>
{
Object.entries(rules).map( ([rule, id]) =>
return {
<div key={id} className='tbl_rules'>
{
rule.map((item, index) => {
<div className='box-1'
contentEditable={selectedCell === id "_" index}
onClick={() => setSelectedCell(id "_" index)}
>
{item}
</div>
})
}
</div>
}
)
}
</div>
# for example rules
{
row_1 : ["rule_1_1", "rule_1_2"],
row_2 : ["rule_2_1", "rule_2_2"]
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/451966.html
標籤：javascript 反应 打字稿