如何仅在反应钩子中更改单击按钮的状态？
如何仅在反应钩子中更改单击按钮的状态？
提问于 2022-05-25 10:38:01
如何更改单击按钮的状态。现在，它正在将“所有接受”按钮的状态更改为页面中的Save。我试着通过身份证，但不起作用。
https://codesandbox.io/s/frosty-chihiro-s4v1cc?file=/src/styles.css
const [processRequest, setProcessRequest] = useState("Accept");
const processRequestData = (e) => {
const text = "Save";
setProcessRequest(text,e.target.id);
};
<section class="col1">
{
searchResults.map(({id, name, mobile}) => (
<div className='row'>
<div className="playerRow">
<label key={id}>
<div className="row">
<div className="checkStyle1">
<input type="checkbox"></input>
</div>
<div className="plyName">
<span>{name}</span>
</div>
<div className="plyMobile">
<span>{mobile}</span>
</div>
<div className="checkStyle2">
<input type="checkbox"></input>
<label>Member</label>
</div>
<div className="checkStyle3">
<input type="checkbox"></input>
<label>Active Player</label>
</div>
<div className="btnStyle4">
<button type="button" onClick={ () => processRequestData(e)}>{processRequest}</button>
</div>
<div className="btnStyle4">
<input type="button" value="Decline Request"></input>
</div>
</div>
</label>
</div>
</div>
))}
</section>回答 3
Stack Overflow用户
回答已采纳
发布于 2022-05-25 11:16:35
我已经为您修复了它，您正在为所有数组项更新相同的字符串变量。
const data = [
{
id: 1,
name: "Danile Victor",
mobile: "3423224232",
processRequest: "Accept"
},
{
id: 2,
name: "Sam Philip",
mobile: "2312312310",
processRequest: "Accept"
},
{
id: 3,
name: "Von Rodriguz",
mobile: "5678999010",
processRequest: "Accept"
},
{
id: 4,
name: "Style Dorkin",
mobile: "7896543212",
processRequest: "Accept"
},
{
id: 5,
name: "Rad",
mobile: "7009943212",
processRequest: "Accept"
}
];
export default function App() {
const [acceptPlayer, setAcceptPlayer] = useState("Accept");
const [requestList, setRequestList] = useState([]);
const [searchResults, setSearchResults] = useState([]);
const [processRequest, setProcessRequest] = useState("Accept");
useEffect(() => {
setRequestList(data);
}, []);
const processRequestData = (e) => {
setRequestList(
requestList.map((r) => {
if (r.id === e) {
r.processRequest = "Save";
}
return r;
})
);
};
return (
<div className="App">
<section className="col1">
{requestList.map(({ id, name, mobile, processRequest }) => (
<div className="row">
<div className="playerRow">
<label key={id}>
<div className="row">
<div className="checkStyle1">
<input type="checkbox"></input>
</div>
<div className="plyName">
<span>{name}</span>
</div>
<div className="plyMobile">
<span>{mobile}</span>
</div>
<div className="checkStyle2">
<input type="checkbox"></input>
<label>Member</label>
</div>
<div className="checkStyle3">
<input type="checkbox"></input>
<label>Active Player</label>
</div>
<div className="btnStyle4">
<button
type="button"
onClick={(e) => processRequestData(id)}
>
{processRequest}
</button>
</div>
<div className="btnStyle4">
<input type="button" value="Decline Request"></input>
</div>
</div>
</label>
</div>
</div>
))}
</section>
</div>
);
}Stack Overflow用户
发布于 2022-05-25 10:54:26
setProcessRequest只使用一个参数。https://reactjs.org/docs/hooks-state.html
您需要跟踪单击的项的状态，例如将搜索结果的id映射为切换状态。
Stack Overflow用户
发布于 2022-05-25 10:59:37
您对每个按钮都使用相同的变量processRequest。您可以为data中的每个元素创建数组，以便这个数组(例如buttonNames)看起来如下：“接受”、“保存”、“接受”、“某物”、.在.map中的jsx内部，在onClick中，您将把索引传递给processRequestData，并通过这个索引在buttonNames中更改值。按钮的呈现值将通过索引(例如，buttonNames )从{buttonNames[index]}中获取。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72376076
复制相关文章
相似问题
腾讯云开发者
