當reactjs中的輸入字段為空時禁用按鈕

Question

我是ReactJS的新手。 我想知道為什么我的下面的代碼不起作用。 一切正常，除了在文本字段為空時禁用我的NEXT按鈕。 我的期望是，在我填寫所有文本框后，將啟用“下一步”按鈕。

class Registration extends React.Component {
constructor (props) {
    super (props);
    this.state = {
        selectedGender: null,
        errors: [],
        initComplete: false
    }

    this._handleSubmit = this._handleSubmit.bind(this);
    this._handleInputMobileOnChange = 
    this._handleInputMobileOnChange.bind(this);
    this.clearError = this.clearError.bind(this);
}
clearError () {
    this.setState({ errors: [] });
}

_handleInputMobileOnChange (e) {
    e.preventDefault();
    this.clearError();
    e.target.value = utils.removeNonNumbers(e.target.value);
    //this.setState({value: e.target.value})
}

change(e){
    if("" != e.target.value){
        this.button.disabled = false;
    }
    else{
        this.button.disabled = true;
    }
}
render() {
    return (
            <div className="container-fluid">
                <form onSubmit={this._handleSubmit}>
                    <div className="form-group has-danger">
                        <label htmlFor="input-MobileNum">number *</label>
                        <input ref={(ref) => this.inputMobile = ref} type="tel" className={'form-control ' } id="input-MobileNum" onChange={()=>{ this._handleInputMobileOnChange; this.change.bind(this)}} defaultValue=""/>
                    </div>
                    <div className="form-group has-danger">
                        <label htmlFor="input-Email">Email address *</label>
                        <input ref={(ref) => this.inputEmail = ref} type="email" className={'form-control '} id="input-Email" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
                    </div>
                    <div className="form-group has-danger">
                        <label htmlFor="input-Invitation">Invitation code</label>
                        <input ref={(ref) => this.inputInvitation = ref} type="text" className={'form-control '} id="input-Invitation" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
                    </div>
                    <div className="form-group cta">
       //NEXT BUTTON
                        <button type="submit" className="btn btn-primary" ref={(button) => this.button=button}>Next</button>
                    </div>
                </form>
            </div>

    )
}

謝謝！！！

我將代碼更新為此。 我逐案測試了它。 由於某些原因，僅移動設備有效，電子郵件和邀請代碼無效。

class Registration extends React.Component {
    constructor (props) {
        super (props);
        this.state = {
            selectedGender: null,
            errors: [],
            initComplete: false
        }

    this._handleSubmit = this._handleSubmit.bind(this);
    this._handleInputMobileOnChange = 
    this._handleInputMobileOnChange.bind(this);
    this._handleInputEmailOnChange = 
    this._handleInputEmailOnChange.bind(this);
    this._handleInputInvitationOnChange = 
    this._handleInputInvitationOnChange.bind(this);
    this.clearError = this.clearError.bind(this);
}
clearError () {
    this.setState({ errors: [] });
}

disable(){
    let disable = true;
    if (this.state.inputMobile || this.state.inputEmail || this.state.inputInvitation) {     //I tried && operator, still only mobile works
        disable = false;
    } 
    return disable;
}

_handleInputMobileOnChange (e) {
    e.preventDefault();
    this.clearError();
    e.target.value = utils.removeNonNumbers(e.target.value);
    this.setState({inputMobile: e.target.value})
}

_handleInputEmailOnChange(e){
    e.preventDefault();
    this.clearError();
    e.target.value = utils.removeNonNumbers(e.target.value);
    this.setState({inputEmail: e.target.value})
}

_handleInputInvitationOnChange(e){
    e.preventDefault();
    this.clearError();
    e.target.value = utils.removeNonNumbers(e.target.value);
    this.setState({inputInvitation: e.target.value})
}

change(e){
    if("" != e.target.value){
        this.button.disabled = false;
    }
    else{
        this.button.disabled = true;
    }
}
render() {
    return (
            <div className="container-fluid">
                <form onSubmit={this._handleSubmit}>
                    <div className="form-group has-danger">
                        <label htmlFor="input-MobileNum">number *</label>
                        <input ref={(ref) => this.inputMobile = ref} type="tel" className={'form-control ' } id="input-MobileNum" onChange={this._handleInputMobileOnChange}} defaultValue=""/>
                    </div>
                    <div className="form-group has-danger">
                        <label htmlFor="input-Email">Email address *</label>
                        <input ref={(ref) => this.inputEmail = ref} type="email" className={'form-control '} id="input-Email" defaultValue="" onChange={this._handleInputEmailOnChange}/>
                    </div>
                    <div className="form-group has-danger">
                        <label htmlFor="input-Invitation">Invitation code</label>
                        <input ref={(ref) => this.inputInvitation = ref} type="text" className={'form-control '} id="input-Invitation" defaultValue="" onChange={this._handleInputInvitationOnChange}/>
                    </div>
                    <div className="form-group cta">
       //NEXT BUTTON
                        <button type="submit" className="btn btn-primary" disabled={this.disable()}>Next</button>
                    </div>
                </form>
            </div>

    )
}

Nvm。 我很傻 上面的代碼有效！ :)））

Answer 1

您應該考慮使用受控輸入元素，而不是不受控制的元素。 這使React可以管理輸入元素的值，這使事情變得容易一些。

首先，將每個輸入元素的初始值添加到構造函數中。 您可能只想在此處輸入空字符串（ "" ）。

然后，為每個輸入元素添加一個change事件偵聽器，並為每個輸入元素創建一個函數。 然后，每個此類函數應檢查其他元素的值以及它自己的值，然后啟用或禁用按鈕。

---

演示：

 class Registration extends React.Component { constructor (props) { super(props); this.state = { selectedGender: null, errors: [], initComplete: false, buttonIsDisabled: true, numberValue: "", emailValue: "", codeValue: "", } this.changeNumber = this.changeNumber.bind(this); this.changeEmail = this.changeEmail.bind(this) this.changeCode = this.changeCode.bind(this); } changeNumber = (e) => { let s = true; if(this.state.emailValue.length && this.state.codeValue.length && e.target.value.length) { s = false; } let val = e.target.value; //let val = utils.removeNonNumbers(e.target.value); this.setState({numberValue: val, buttonIsDisabled: s, errors: []}); } changeEmail = (e) => { let s = true; if(this.state.numberValue.length && this.state.codeValue.length && e.target.value.length) { s = false; } this.setState({emailValue: e.target.value, buttonIsDisabled: s, errors: []}); } changeCode = (e) => { let s = true; if(this.state.numberValue.length && this.state.emailValue.length && e.target.value.length) { s = false; } this.setState({codeValue: e.target.value, buttonIsDisabled: s, errors: []}); } render() { return ( <div className="container-fluid"> <form onSubmit={this._handleSubmit}> <div className="form-group has-danger"> <label htmlFor="input-MobileNum">number *</label> <input type="tel" className={'form-control ' } id="input-MobileNum" onChange={this.changeNumber} /> </div> <div className="form-group has-danger"> <label htmlFor="input-Email">Email address *</label> <input type="email" className={'form-control '} id="input-Email" onChange={this.changeEmail} /> </div> <div className="form-group has-danger"> <label htmlFor="input-Invitation">Invitation code</label> <input type="text" className={'form-control '} id="input-Invitation" onChange={this.changeCode} /> </div> <div className="form-group cta"> <button type="submit" className="btn btn-primary" disabled={this.state.buttonIsDisabled} ref={(button) => this.button=button}>Next</button> </div> </form> </div> ) }} ReactDOM.render(<Registration />, document.getElementById("myApp")); 

 <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> <div id="myApp"></div> 

Answer 2

保持禁用狀態，然后在更改功能上檢查所有輸入是否都具有值，然后將禁用狀態設置為false，如下面的代碼段所示

class Registration extends React.Component {
constructor (props) {
    super (props);
    this.state = {
        selectedGender: null,
        errors: [],
        initComplete: false, 
        disabled: true
    }

    this._handleSubmit = this._handleSubmit.bind(this);
    this._handleInputMobileOnChange = 
    this._handleInputMobileOnChange.bind(this);
    this.clearError = this.clearError.bind(this);
}
clearError () {
    this.setState({ errors: [] });
}

_handleInputMobileOnChange (e) {
    e.preventDefault();
    this.clearError();
    e.target.value = utils.removeNonNumbers(e.target.value);
    //this.setState({value: e.target.value})
}

change = () => {
    if(this.inputMobile !== '' && this.inputEmail !== '' && this.inputInvitation != '' ) {
         this.setState({disabled: false});
    }
}
render() {
    return (
            <div className="container-fluid">
                <form onSubmit={this._handleSubmit}>
                    <div className="form-group has-danger">
                        <label htmlFor="input-MobileNum">number *</label>
                        <input ref={(ref) => this.inputMobile = ref} type="tel" className={'form-control ' } id="input-MobileNum" onChange={()=>{ this._handleInputMobileOnChange; this.change.bind(this)}} defaultValue=""/>
                    </div>
                    <div className="form-group has-danger">
                        <label htmlFor="input-Email">Email address *</label>
                        <input ref={(ref) => this.inputEmail = ref} type="email" className={'form-control '} id="input-Email" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
                    </div>
                    <div className="form-group has-danger">
                        <label htmlFor="input-Invitation">Invitation code</label>
                        <input ref={(ref) => this.inputInvitation = ref} type="text" className={'form-control '} id="input-Invitation" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
                    </div>
                    <div className="form-group cta">
       //NEXT BUTTON
                        <button type="submit" className="btn btn-primary" ref={(button) => this.button=button} disabled={this.state.disabled}>Next</button>
                    </div>
                </form>
            </div>

    )
}