[reactjs] 입력이 비어있을 때 버튼을 비활성화하는 방법은 무엇입니까?

Program / 글쓴이

JavaScript를 처음 사용합니다. 입력 필드가 비어있을 때 버튼을 비활성화하려고합니다. 이것을 위해 React에서 가장 좋은 방법은 무엇입니까?

나는 다음과 같은 일을하고있다 :

<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>

답변

간단한 다음은 다음을 포함하는 Component를 확장하여 상태를 전체 클래스로 만들었다 고 가정합니다.

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/>
            )

       }

   }

답변