วิธีการปิดการใช้งานปุ่มเมื่อมีการป้อนข้อมูลเป็นที่ว่างเปล่า?

168

ฉันใหม่เพื่อทำปฏิกิริยา ฉันพยายามที่จะปิดการใช้งานปุ่มเมื่อช่องใส่เป็นที่ว่างเปล่า อะไรคือวิธีที่ดีที่สุดในการตอบโต้เรื่องนี้?

ฉันกำลังทำสิ่งต่อไปนี้:

<input ref="email"/>

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

นี่คือถูกต้องหรือไม่

ไม่ใช่แค่การทำซ้ำแอตทริบิวต์แบบไดนามิกเพราะฉันยังสงสัยเกี่ยวกับการถ่ายโอน / ตรวจสอบข้อมูลจากองค์ประกอบหนึ่งไปอีกองค์ประกอบหนึ่ง

reactjs

— Stepan Suvorov
แหล่งที่มา

3

ซ้ำเป็นไปได้ของแบบไดนามิกแอตทริบิวต์ใน ReactJS

— WiredPrairie

257

คุณจะต้องเก็บค่าปัจจุบันของอินพุตในสถานะ (หรือส่งผ่านการเปลี่ยนแปลงในค่าของมันถึงผู้ปกครองผ่านฟังก์ชั่นการโทรกลับหรือด้านข้างหรือ<โซลูชั่นการจัดการสถานะแอปของคุณที่นี่>ในที่สุดมันจะถูกส่งกลับเข้าไป คอมโพเนนต์ของคุณเป็นเสา) เพื่อให้คุณสามารถรับเสาที่ปิดการใช้งานสำหรับปุ่ม

ตัวอย่างการใช้สถานะ:

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

ขยายตัวอย่างข้อมูล

— จอนนี่บูคานัน
แหล่งที่มา

3

ยอดเยี่ยมตัวอย่างทำงานและทุกสิ่ง ตัวอย่างที่สมบูรณ์ดีและการสาธิตการโต้ตอบที่ดีดังนั้น

— four43

1

สิ่งนี้ไม่สามารถใช้งานได้เพราะdisabledเพียงแค่ติดกับองค์ประกอบหมายความว่าองค์ประกอบนั้นจะถูกปิดการใช้งาน มันไม่ใช่บูล เห็นนี้: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/...

— Kayote

4

@ Kayote ที่ไม่เป็นความจริงสำหรับ React แท็กเหล่านั้นไม่ใช่ HTML แต่เป็น JSX และใน JSX ถ้าแอตทริบิวต์ที่ได้รับมอบหมายเป็นเท็จจะถูกลบออกทั้งหมดเมื่อมีการแปลงเป็น HTML คุณเพียงแค่เพิกเฉยความคิดเห็นที่อยู่เหนือคุณทันทีซึ่งบอกว่ามันทำงานได้อย่างสมบูรณ์

— Ben Baron

2

@ BenBaron ขอบคุณสำหรับการชี้แจง ฉันจำไม่ได้ว่าฉันใช้ที่ไหน / อย่างไรฉันมีปัญหาเล็กน้อย ฉันยกระดับความคิดเห็นของคุณเพื่อให้คนอื่นรู้ว่าวิธีนี้เป็นวิธีที่ถูกต้องตามประสบการณ์ของผู้คน

— Kayote

3

@ Kayote ขอบคุณและขอโทษถ้าฉันออกมาหยาบคายเล็กน้อยกับส่วนสุดท้ายของความคิดเห็น มันเป็นวันที่ยาวนานจริงๆ

— Ben Baron

8

โดยใช้ค่าคงที่ช่วยให้การรวมหลายเขตข้อมูลสำหรับการตรวจสอบ:

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>

ขยายตัวอย่างข้อมูล

— Gi1ber7
แหล่งที่มา

7

อีกวิธีในการตรวจสอบคือการอินไลน์ฟังก์ชั่นเพื่อให้เงื่อนไขจะถูกตรวจสอบในทุกการแสดงผล (ทุกอุปกรณ์ประกอบฉากและการเปลี่ยนแปลงของรัฐ)

const isDisabled = () => 
  // condition check

งานนี้:

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

แต่นี้จะไม่ทำงาน:

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

— มาร์คเฉื่อยชาอีสต์แมน
แหล่งที่มา

-1

มันง่ายให้เราคิดว่าคุณได้ทำให้รัฐเต็มชั้นโดยการขยายส่วนประกอบซึ่งมีดังต่อไปนี้

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 ค
แหล่งที่มา