React에서 버튼 비활성화
button 요소에 비활성화된 소품을 사용하여 react.js에서 버튼을 비활성화하는 방법을 소개합니다.
버튼을 클릭한 후 비활성화하는 방법도 소개합니다.
또한 입력 필드에 데이터를 입력하기 전에 사용자가 버튼을 클릭하지 못하도록 양식에서 disable the button를 사용하는 방법을 소개합니다.
React에서 버튼 비활성화
단순히 버튼을 비활성화하려면 버튼 요소에서 disabled prop을 사용하고 값을 true로 설정할 수 있습니다. 반응에서 모든 버튼을 비활성화하는 가장 간단한 방법입니다.
예제 코드:
# react.js
import React from "react";
function Disable(){
return <button disabled={true}>I am Disabled!</button>
}
export default Disable
출력:
위의 출력 미리보기에서 버튼이 비활성화된 것을 볼 수 있습니다.
React에서 버튼 클릭 후 버튼 비활성화
버튼을 클릭한 후 비활성화하려면 반응 상태를 사용하여 비활성화할 수 있습니다. 로드 시 버튼의 disable 상태를 false로 설정하고 버튼 요소에 onClick 기능을 추가하여 버튼의 disable 상태를 true로 설정합니다. 따라서 사용자가 버튼을 클릭하면 disable 상태가 true로 변경됩니다.
예제 코드:
# react.js
import React from "react";
function DisableAfterClick() {
const [disable, setDisable] = React.useState(false);
return (
<button disabled={disable} onClick={() => setDisable(true)}>
Click to Disable!
</button>
);
}
export default DisableAfterClick
출력:
위의 출력 미리보기에서 버튼이 비활성화된 것을 볼 수 있습니다. 그러나 버튼을 비활성화한 후에 활성화할 방법이 없습니다.
입력 필드가 비어 있을 때 버튼 비활성화 및 사용자가 입력 필드에 입력할 때 활성화
사용자가 입력 필드에 텍스트를 입력할 때 비활성화된 버튼을 활성화하고 사용자가 입력 필드를 지울 때 비활성화하려면 disabled 기능을 사용할 수 있습니다. 따라서 사용자가 입력 필드에 무언가를 입력하면 disabled 기능은 !text에서 false 값을 가져와 버튼의 state를 disabled에서 enabled로 변경합니다. 그리고 사용자가 입력 필드를 지울 때 !text는 true를 반환하고 버튼의 state를 disabled로 변경합니다.
예제 코드:
import React, { useState } from "react";
function EnableOnInputChange() {
const [text, enableButton] = useState("");
const handleTextChange = (event) => {
enableButton(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert(`Your state values: \n
text: ${text} \n
You can replace this alert with your process`);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Enter Text</label>
<input
type="text"
name="text"
placeholder="Enter Text"
onChange={handleTextChange}
value={text}
/>
</div>
<button type="submit" disabled={!text}>
Enable
</button>
</form>
);
}
export default EnableOnInputChange
출력:
위의 출력에서 볼 수 있습니다. 입력 필드에 입력할 때 버튼이 활성화되고 지우면 입력 필드 버튼이 다시 비활성화됩니다.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn