반응형
입력이 비어 있을 때 버튼을 비활성화하려면 어떻게 해야 합니까?
입력 필드가 비어 있을 때 버튼을 비활성화하려고 합니다.이에 대한 Respect의 최선의 접근법은 무엇입니까?
저는 다음과 같은 일을 하고 있습니다.
<input ref="email"/>
<button disabled={!this.refs.email}>Let me in</button>
이거 맞는건가요?
한 요소에서 다른 요소로 데이터를 전송/확인하는 것이 궁금하기 때문에 동적 속성을 복제하는 것만이 아닙니다.
입력의 현재 값을 그대로 유지해야 합니다(또는 콜백 함수, 측면 또는 <여기서 앱의 상태 관리 솔루션>을 통해 부모에게 값의 변경을 전달하여 최종적으로 소품으로서 컴포넌트에 전달되도록 해야 합니다). 그러면 버튼의 비활성화된 소품을 도출할 수 있습니다.
상태 사용 예:
<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";
var App = React.createClass({
getInitialState() {
return {email: ''}
},
handleChange(e) {
this.setState({email: e.target.value})
},
render() {
return <div>
<input name="email" value={this.state.email} onChange={this.handleChange}/>
<button type="button" disabled={!this.state.email}>Button</button>
</div>
}
})
React.render(<App/>, document.getElementById('app'))
}()</script>상수를 사용하면 여러 필드를 조합하여 확인할 수 있습니다.
class LoginFrm extends React.Component {
constructor() {
super();
this.state = {
email: '',
password: '',
};
}
handleEmailChange = (evt) => {
this.setState({ email: evt.target.value });
}
handlePasswordChange = (evt) => {
this.setState({ password: evt.target.value });
}
handleSubmit = () => {
const { email, password } = this.state;
alert(`Welcome ${email} password: ${password}`);
}
render() {
const { email, password } = this.state;
const enabled =
email.length > 0 &&
password.length > 0;
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Email"
value={this.state.email}
onChange={this.handleEmailChange}
/>
<input
type="password"
placeholder="Password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
<button disabled={!enabled}>Login</button>
</form>
)
}
}
ReactDOM.render(<LoginFrm />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
</body>다른 체크 방법은 함수를 인라인하여 모든 렌더링(모든 소품 및 상태 변경)에서 조건이 체크되도록 하는 것입니다.
const isDisabled = () =>
// condition check
이 방법은 다음과 같습니다.
<button
type="button"
disabled={this.isDisabled()}
>
Let Me In
</button>
하지만 이 방법은 작동하지 않습니다.
<button
type="button"
disabled={this.isDisabled}
>
Let Me In
</button>
const Example = () => {
const [value, setValue] = React.useState("");
function handleChange(e) {
setValue(e.target.value);
}
return (
<input ref="email" value={value} onChange={handleChange}/>
<button disabled={!value}>Let me in</button>
);
}
export default Example;
<button disabled={false}>button WORKS</button>
<button disabled={true}>button DOES NOT work</button>
이제 useState 또는 기타 조건을 사용하여 React를 사용하는 것으로 가정하고 true/false를 버튼에 전달합니다.
간단한 예로 다음과 같은 컴포넌트를 확장하여 스테이트 풀클래스를 만들었다고 가정해 보겠습니다.
class DisableButton extends Components
{
constructor()
{
super();
// now set the initial state of button enable and disable to be false
this.state = {isEnable: false }
}
// this function checks the length and make button to be enable by updating the state
handleButtonEnable(event)
{
const value = this.target.value;
if(value.length > 0 )
{
// set the state of isEnable to be true to make the button to be enable
this.setState({isEnable : true})
}
}
// in render you having button and input
render()
{
return (
<div>
<input
placeholder={"ANY_PLACEHOLDER"}
onChange={this.handleChangePassword}
/>
<button
onClick ={this.someFunction}
disabled = {this.state.isEnable}
/>
<div/>
)
}
}
언급URL : https://stackoverflow.com/questions/30187781/how-to-disable-a-button-when-an-input-is-empty
반응형
'programing' 카테고리의 다른 글
| 인터페이스 org.springframework.data.domain의 기본 또는 기본 생성자를 찾을 수 없습니다.페이지 가능 (0) | 2023.03.16 |
|---|---|
| 그 이외의 경우 StateProvider에서 (0) | 2023.03.16 |
| 여러 Atribute를 Angular.js Atribute Directive로 전달하려면 어떻게 해야 하나요? (0) | 2023.03.16 |
| 기본 내보내기 선호 오류 (0) | 2023.03.16 |
| spring-boot-boot-boot-web과 spring-boot-boot-web의 비교 (0) | 2023.03.16 |