Làm thế nào để vô hiệu hóa một nút khi đầu vào trống?

168

Tôi mới sử dụng React JavaScript. Tôi đang cố gắng vô hiệu hóa một nút khi một trường đầu vào trống. Cách tiếp cận tốt nhất trong React cho điều này là gì?

Tôi đang làm một cái gì đó như sau:

<input ref="email"/>

<button disabled={!this.refs.email}>Let me in</button>

Điều này có đúng không?

Đây không chỉ là sự trùng lặp của thuộc tính động, bởi vì tôi cũng tò mò về việc chuyển / kiểm tra dữ liệu từ yếu tố này sang yếu tố khác.

reactjs

— Stepan Suvorov
nguồn

3

có thể trùng lặp thuộc tính Động trong ReactJS

— WiredPrairi

257

Bạn sẽ cần giữ giá trị hiện tại của đầu vào ở trạng thái (hoặc chuyển các thay đổi về giá trị của nó cho phụ huynh thông qua chức năng gọi lại hoặc đi ngang hoặc <giải pháp quản lý trạng thái của ứng dụng của bạn ở đây> để cuối cùng nó được đưa trở lại thành phần của bạn dưới dạng prop) để bạn có thể lấy được prop bị vô hiệu hóa cho nút.

Ví dụ sử dụng trạng thái:

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

Mở rộng đoạn trích

— Jonny
nguồn

3

Tuyệt vời, ví dụ chạy và tất cả mọi thứ. Ví dụ đầy đủ đẹp và bản demo tương tác đẹp, SO.

— bốn43

1

Điều này sẽ không hoạt động bởi vì disabled, chỉ bằng cách được gắn vào một phần tử, có nghĩa là phần tử đó sẽ bị vô hiệu hóa. Nó không phải là một bool. Xem điều này: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectEuity/ khăn

— Kayote

4

@Kayote không đúng với React. Các thẻ đó không phải là HTML, chúng là JSX. Và trong JSX, nếu một thuộc tính được gán sai, nó sẽ bị xóa hoàn toàn khi chuyển đổi sang HTML. Bạn đã bỏ qua bình luận ngay phía trên của bạn mà nói rằng nó chạy hoàn hảo?

— Ben Baron

2

@BenBaron cảm ơn đã làm rõ. Tôi không nhớ tôi đã sử dụng nó ở đâu / như thế nào, tuy nhiên, tôi có một vài vấn đề. Tôi nâng cao nhận xét của bạn để người khác biết rằng phương pháp này là phương pháp chính xác dựa trên kinh nghiệm của mọi người.

— Kayote

3

@Kayote Cảm ơn và xin lỗi nếu tôi tỏ ra hơi thô lỗ với phần cuối của bình luận. Đó là một ngày thực sự dài.

— Ben Baron

8

Sử dụng hằng cho phép kết hợp nhiều trường để xác minh:

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>

Mở rộng đoạn trích

— Gi1ber7
nguồn

7

Một cách khác để kiểm tra là nội tuyến hàm, để điều kiện sẽ được kiểm tra trên mỗi kết xuất (mọi đạo cụ và thay đổi trạng thái)

const isDisabled = () => 
  // condition check

Những công việc này:

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

nhưng điều này sẽ không hoạt động:

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>

— Marc Sloth Eastman
nguồn

-1

thật đơn giản, giả sử bạn đã tạo một lớp đầy đủ trạng thái bằng cách mở rộng Thành phần có chứa sau

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

       }

   }

— keerthi c
nguồn