在React中重置除单击的兄弟组件之外的所有兄弟组件,可以通过以下步骤实现:
map
函数遍历所有兄弟组件,并为每个兄弟组件添加一个属性来确定其是否应该被重置。下面是一个示例代码:
import React, { useState } from 'react';
const ParentComponent = () => {
const [clickedSibling, setClickedSibling] = useState(null);
const handleClick = (index) => {
setClickedSibling(index);
};
return (
<div>
{siblings.map((sibling, index) => (
<SiblingComponent
key={index}
reset={!clickedSibling || clickedSibling === index}
onClick={() => handleClick(index)}
/>
))}
</div>
);
};
const SiblingComponent = ({ reset, onClick }) => {
const [value, setValue] = useState('');
const handleReset = () => {
setValue('');
};
return (
<div>
<input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
{reset && <button onClick={handleReset}>Reset</button>}
<button onClick={onClick}>Click</button>
</div>
);
};
在上述示例中,ParentComponent
是父组件,SiblingComponent
是兄弟组件。父组件中的clickedSibling
状态属性用于跟踪当前被单击的兄弟组件的索引。handleClick
方法用于更新clickedSibling
的值。
在父组件的map
函数中,根据clickedSibling
的值确定是否需要重置兄弟组件。如果clickedSibling
为null
或与当前兄弟组件的索引相等,则将reset
属性设置为true
,否则为false
。
在兄弟组件中,根据父组件传递的reset
属性来确定是否需要重置自身。如果reset
为true
,则在点击"Reset"按钮时重置输入框的值。
这样,除了被单击的兄弟组件之外的其他兄弟组件都会被重置。
领取专属 10元无门槛券
手把手带您无忧上云