每次選中復選框時，我都想更新文本輸入欄位（true）。有人可以建議如何做到這一點嗎？
我正在嘗試單擊一個復選框并更新另一個輸入欄位。每次選中復選框時，我都想將日期添加到字串中。
目前，我的字串值被新值覆寫。我希望它是一個字串而不是一個陣列。
const [checkboxCheckedTrue, setCheckboxStatus] = useState(false);
const [updateMyMsg, setmyMsg] = React.useState("");
useEffect((): void => {
if (checkboxCheckedTrue) {
var a = new Date();
const myMsg = "My Date is" a;
setmyMsg(myMsg );
}
});
我預期的字串應如下所示：
"Thu Sep 15 2022 15:52:41 <br/> Thu Sep 15 2022 15:52:41 <br/> Thu Sep 15 2022 15:52:41"
uj5u.com熱心網友回復：
如果您想在值更新并切換為 trueupdateMyMsg時將checkboxCheckedTrue值附加到狀態，請使用功能狀態更新來附加到先前狀態的值。
例子：
const [checkboxCheckedTrue, setCheckboxStatus] = useState<Boolean>(false);
const [myMsg, setMyMsg] = useState<string>("");
useEffect((): void => {
if (checkboxCheckedTrue) {
setMyMsg(myMsg => myMsg (new Date()).toString() "<br/>");
}
}, [checkboxCheckedTrue]);
將陣列用于myMsg狀態并.join在您想使用狀態值時呼叫可能會更簡單。
例子：
const [checkboxCheckedTrue, setCheckboxStatus] = useState<Boolean>(false);
const [myMsg, setMyMsg] = useState<string[]>([]);
useEffect((): void => {
if (checkboxCheckedTrue) {
setMyMsg(myMsg => myMsg.concat((new Date()).toString()));
}
}, [checkboxCheckedTrue]);
...
myMsg.join("<br/>")
uj5u.com熱心網友回復：
請試試這個，希望它有幫助:)
const [updateMyMsg, setmyMsg] = React.useState("");
useEffect((): void => {
if (checkboxCheckedTrue) {
var a = new Date().toDateString();
const myMsg = `${updateMyMsg}${a}`;
setmyMsg(myMsg );
}
},[checkboxCheckedTrue]);
uj5u.com熱心網友回復：
您可以在選中和取消選中復選框但值為 true 時管理訊息日志值。
當您需要選中復選框時，您需要每次管理訊息陣列。
像這樣的東西
例子：
import React, { useEffect, useState, Fragment } from "react";
export default function App() {
const [isCheckboxSelected, setCheckbox] = useState(false);
const [messages, setMessages] = useState([]);
useEffect(() => {
if (isCheckboxSelected) {
const newMessage = new Date().toString();
setMessages((messages) => [...messages, ...[newMessage]]);
}
}, [isCheckboxSelected]);
return (
<div className="App">
<input
type="checkbox"
value={isCheckboxSelected}
onChange={() => setCheckbox((preValue) => !preValue)}
/>
{messages?.map((message, index) => {
return (
<Fragment key={index}>
<p>{message}</p>
</Fragment>
);
})}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/508275.html