英文:
How to get button to change visibility based on checkbox in JavaScript
问题
以下是您要翻译的内容:
"new to JS here and working on a react project, I want to essentially have the button's visibility attribute which is set to false to change to true when a checkbox is checked, here is my code and I believe the logic is there but for some reason is not reflected on the UI, any advice is appreciated
const [visible, setVisibility] = useState(false)
function clicked() {
console.log('in cliked')
const check = document.getElementById('acknowledged')
check.addEventListener('click', showContinueButton())
setVisibility(true)
}
function showContinueButton() {
const continueButton = document.getElementById('continue')
console.log(continueButton.getAttribute("visibility"))
if(visible) {
console.log('in the visible for loop')
continueButton.setAttribute('visibility', 'visible')
}
}
the code above is the code I have defined before the return JSX, then within the JSX I call this code as followed...
<input type='checkbox' id='acknowledged' onClick={clicked}></input>
So essentially when this checkbox is clicked, using the onClick attribute, I pass the click function I passed earlier which has an eventListener with a callback function to change the visibility of the button"
英文:
new to JS here and working on a react project, I want to essentially have the button's visibility attribute which is set to false to change to true when a checkbox is checked, here is my code and I believe the logic is there but for some reason is not reflected on the UI, any advice is appreciated
const [visible, setVisibility] = useState(false)
function clicked() {
console.log('in cliked')
const check = document.getElementById('acknowledged')
check.addEventListener('click', showContinueButton())
setVisibility(true)
}
function showContinueButton() {
const continueButton = document.getElementById('continue')
console.log(continueButton.getAttribute("visibility"))
if(visible) {
console.log('in the visible for loop')
continueButton.setAttribute('visibility', 'visible')
}
}
the code above is the code I have defined before the return JSX, then within the JSX I call this code as followed...
<input type='checkbox' id='acknowledged' onClick={clicked}></input>
So essentially when this checkbox is clicked, using the onClick attribute, I pass the click function I passed earlier which has an eventListener with a callback function to change the visibility of the button
答案1
得分: 3
使用状态,您无需操作CSS。
以下是供您参考的示例:
// language: lang-js
const [visible, setVisibility] = useState(false);
let clicked = e => {
setVisibility(e.target.checked);
}
return (
<div>
<input type="checkbox" onClick={clicked}/>
{
visible &&
<button>按钮1</button>
}
</div>
)
英文:
With the use of a state, you don't need to manipulate the CSS.
Here is an example for your reference:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const [visible, setVisibility] = useState(false);
let clicked = e => {
setVisibility(e.target.checked);
}
return (
<div>
&nbsp; <input type = "checkbox" onClick = {clicked}/>
{
visible &&
<button> Button1 </button>
}
</div>
)
<!-- end snippet -->
答案2
得分: 1
另一种与 @The KNVB 已经提到的变体:
const [visible, setVisible] = useState(false);
return (
<div>
<input type="checkbox" onClick={() => setVisible(!visible)}/>
<br />
{ visible && <button>可见按钮</button> }
</div>
)
英文:
Another variation of what @The KNVB already said:
const [visible, setVisible] = useState(false);
return (
<div>
<input type="checkbox" onClick={() => setVisible(!visible)}/>
<br />
{ visible && <button>visible button</button> }
</div>
)
答案3
得分: 0
我想指出你的函数中有很多经典的JavaScript逻辑,应该通过钩子来使用,而不是直接使用。
因此,这些原生函数在React中有更好的替代方案。
document.getElementById();
getAttribute();
setAttribute();
解决你的问题的正确方法应该如下:
import { useState } from "react";
export default function App() {
// 1. 变量 'visible' 的初始值为 false
const [visible, setVisible] = useState(false);
/*
3. 单击按钮处理函数更新状态(变量 visible 的值)为与当前值相反的值,
如果为 true,则变为 false,如果为 false,则变为 true
*/
function onClickHandle() {
setVisible((visible) => !visible);
}
/*
5. 逻辑
每当应用程序状态发生更改时,都会返回此函数,这意味着每当用户单击复选框时,var visible 的状态都会更改,因此组件会重新渲染。
*/
return (
<div className="App">
<label>
复选框
{/* 2. 输入复选框具有传递为引用的 onClick 处理函数,这意味着在单击复选框时将调用该函数。 */}
<input type="checkbox" onClick={onClickHandle} />
</label>
{/* 4. 应用程序 - 如何处理逻辑的示例,我使用了三元运算符,但基本上是说如果 visible 的值为 true,则返回 'checked',否则返回 'not checked'。 */}
<h2>复选框 {visible ? "已选中" : "未选中"}</h2>
</div>
);
}
英文:
I want to point out that there are a lot of classical JavaScript logic in your functions, which should be used via hooks, and not directly.
Hence these vanilla functions have better alternatives in React.
document.getElementById();
getAttribute();
setAttribute();
The right way to resolve your issue should instead be as follows:
import { useState } from "react";
export default function App() {
// 1. the variable 'visible' has initial value equal to false
const [visible, setVisible] = useState(false);
/*
3. The click handle button updates the state (variable value of visible) to opposite of whatever it is,
if true , then false, if false, then true
*/
function onClickHandle() {
setVisible((visible) => !visible);
}
/*
5. LOGIC
This function is returned everytime the state of the application changes, meaning everytime a user clicks on the checkbox, the state of var visible changes, and hence the component rerenders.
*/
return (
<div className="App">
<label>
Checkbox
{/* 2. The input checkbox has a onClick Handler function passed as reference, meaning that function will be called when the checkbox is clicked. */}
<input type="checkbox" onClick={onClickHandle} />
</label>
{/* 4. Application - An example of how to handle the logic, I have used terinary operator but basically it is saying if the value of visible if visible, return 'checked', else return 'not checked' */}
<h2>Check box is {visible ? "checked" : "not checked"}</h2>
</div>
);
}
答案4
得分: 0
const [visible, setVisibility] = useState(false)
<button
style={{visibility:visible?'visible':'hidden'}}
>
继续
</button>
<input
type='checkbox'
onClick={() => {setVisibility(previousVisibility => !previousVisibility)}}
/>
英文:
const [visible, setVisibility] = useState(false)
<button
style={{visibility:visible?'visible':'hidden'}}
>
continue
</button>
<input
type='checkbox'
onClick = {()=>{setVisibility(previousVisibility => !previousVisibility)}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论