我正在嘗試使按鈕僅在我的創建頁面中可見。我已經想出了如何做到這一點，盡管以重復代碼的方式
if (mode != "view") {
return (
<>
<section
className={`col-md-${sectionInputArray.width} justify-content border-end mt-2 mb-2`}
>
<h4 className="border-bottom">{`${sectionInputArray.name}`} </h4>
<div className="col-12"></div>
{sectionInputArray.contents.map((input, i) => (
<NestedDynamicInputCreation
singleInput={input}
formData={formData}
setFormData={setFormData}
options={options}
mode={mode}
staticVars={staticVars}
SetStaticVars={SetStaticVars}
i={i}
idx={idx}
arrayLength={arrayLength}
sectionUID={sectionInputArray.UID}
/>
))}
{/* Button to add new field */}
<button
id ="TestButton1"
className="btn btn-primary bt-btn m-3"
type="button"
onClick={() => {
// console.log(`${sectionInputArray.name} section will be added`);
// console.log({ formDataTarget: formData[sectionInputArray.UID] });
// New Inbound Rule
// console.log([
// ...formData[sectionInputArray.UID],
// NestedListIDSingle(sectionInputArray),
// ]);
let addedFormData = {
...formData,
[`${sectionInputArray.UID}`]: [
...formData[sectionInputArray.UID],
NestedListIDSingle(sectionInputArray),
],
};
let randomVal = Math.random()
.toString(36)
// .replace(/[^a-z] /g, "")
.substr(0, 11);
let withRandom = {
...addedFormData,
rand_value: randomVal,
};
// console.log({ addedFormData: addedFormData });
setFormData(withRandom);
}}
>
Add New {sectionInputArray.name}
</button>
{/* Button to remove section (or created form) */}
<button
className="btn btn-primary bt-btn m-3"
type="button"
onClick={() => {
console.log(
`${sectionInputArray.name}-${idx} section will be removed`
);
// formData[sectionInputArray.UID].splice(idx, 1);
let formDataTarget = formData[sectionInputArray.UID];
// console.log(formDataTarget);
let newFD = formData;
newFD[sectionInputArray.UID].splice(idx, 1);
let randomVal = Math.random()
.toString(36)
// .replace(/[^a-z] /g, "")
.substr(0, 11);
let withRandom = {
...newFD,
rand_value: randomVal,
};
setFormData(withRandom);
}}
>
Remove {sectionInputArray.name}
</button>
</section>
</>
);
} else {
return (
<>
<section
className={`col-md-${sectionInputArray.width} justify-content border-end mt-2 mb-2`}
>
<h4 className="border-bottom">{`${sectionInputArray.name}`} </h4>
<div className="col-12"></div>
{sectionInputArray.contents.map((input, i) => (
<NestedDynamicInputCreation
singleInput={input}
formData={formData}
setFormData={setFormData}
options={options}
mode={mode}
staticVars={staticVars}
SetStaticVars={SetStaticVars}
i={i}
idx={idx}
arrayLength={arrayLength}
sectionUID={sectionInputArray.UID}
/>
))}
</section>
</>
)
正如您在上面看到的，當它不在視圖頁面上時，它將不會使用按鈕，因為它在“其他”部分中被洗掉。
當按鈕有條件時，我如何創建一個實體。我嘗試在按鈕部分之前放置一個 if 陳述句，但是沒有用
uj5u.com熱心網友回復：
是的，您可以做到 - 將條件渲染（運算子 &&）放在<NestedDynamicInputCreation
return (
<>
<section
className={`col-md-${sectionInputArray.width} justify-content border-end mt-2 mb-2`}
>
<h4 className="border-bottom">{`${sectionInputArray.name}`} </h4>
<div className="col-12"></div>
{sectionInputArray.contents.map((input, i) => (
<NestedDynamicInputCreation
singleInput={input}
formData={formData}
setFormData={setFormData}
options={options}
mode={mode}
staticVars={staticVars}
SetStaticVars={SetStaticVars}
i={i}
idx={idx}
arrayLength={arrayLength}
sectionUID={sectionInputArray.UID}
/>
))}
{mode != 'view' && (
<>
<button
id ="TestButton1"
className="btn btn-primary bt-btn m-3"
type="button"
onClick={() => {
...
})
>
Add New {sectionInputArray.name}
</button>
<button
className="btn btn-primary bt-btn m-3"
type="button"
onClick={() => {
..
})
>
Remove {sectionInputArray.name}
</button>
</>
)}
</section>
</>
);
uj5u.com熱心網友回復：
如果內容相同，您可以使用 Fragments 并有條件地顯示按鈕：
return (
<>
<section
className={`col-md-${sectionInputArray.width} justify-content border-end mt-2 mb-2`}
>
<h4 className="border-bottom">{`${sectionInputArray.name}`} </h4>
<div className="col-12"></div>
{sectionInputArray.contents.map((input, i) => (
<NestedDynamicInputCreation
singleInput={input}
formData={formData}
setFormData={setFormData}
options={options}
mode={mode}
staticVars={staticVars}
SetStaticVars={SetStaticVars}
i={i}
idx={idx}
arrayLength={arrayLength}
sectionUID={sectionInputArray.UID}
/>
))}
{mode !== 'view' && (
<>
<button
id ="TestButton1"
className="btn btn-primary bt-btn m-3"
type="button"
onClick={() => {
// console.log(`${sectionInputArray.name} section will be added`);
// console.log({ formDataTarget: formData[sectionInputArray.UID] });
// New Inbound Rule
// console.log([
// ...formData[sectionInputArray.UID],
// NestedListIDSingle(sectionInputArray),
// ]);
let addedFormData = {
...formData,
[`${sectionInputArray.UID}`]: [
...formData[sectionInputArray.UID],
NestedListIDSingle(sectionInputArray),
],
};
let randomVal = Math.random()
.toString(36)
// .replace(/[^a-z] /g, "")
.substr(0, 11);
let withRandom = {
...addedFormData,
rand_value: randomVal,
};
// console.log({ addedFormData: addedFormData });
setFormData(withRandom);
}}
>
Add New {sectionInputArray.name}
</button>
{/* Button to remove section (or created form) */}
<button
className="btn btn-primary bt-btn m-3"
type="button"
onClick={() => {
console.log(
`${sectionInputArray.name}-${idx} section will be removed`
);
// formData[sectionInputArray.UID].splice(idx, 1);
let formDataTarget = formData[sectionInputArray.UID];
// console.log(formDataTarget);
let newFD = formData;
newFD[sectionInputArray.UID].splice(idx, 1);
let randomVal = Math.random()
.toString(36)
// .replace(/[^a-z] /g, "")
.substr(0, 11);
let withRandom = {
...newFD,
rand_value: randomVal,
};
setFormData(withRandom);
}}
>
Remove {sectionInputArray.name}
</button>
</>
)}
</section>
</>
);
uj5u.com熱心網友回復：
一個如何&&在運算式中使用 來決定一個元素是否被渲染的例子。
function Example() {
const [showButton, setShowButton] = React.useState(true);
return (
<div className='example'>
<div>some text</div>
{
showButton && <button onClick={() => setShowButton(!showButton)}>click me</button>
}
</div>)
}
提琴手示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/341366.html
上一篇：如何在C#中檢查數字是否可以被另一個數字整除而不進行條件檢查（if、三元等）
下一篇：BashIf陳述句指定不正確