Question

我有一个输入框号和一个按钮。

在页面加载中，该按钮显示为灰色。应用的CSS是“ button button--primary button--primary--dark button--full-width button--disabled”

当我在输入框中输入内容时，“ CSS for”按钮应更改为“ button button--primary button--primary--dark button--full-width”

import React, { Component } from 'react'

class NumberCheck extends Component {

    render() {

        return (
            <form className="spring spring--sm">
                {/* <div className="errorMsg">{this.state.errors.mobileno}</div> */}
                <div className="alert alert--light alert--warning validation__warning">
                    <div className="caption">
                        <div className="caption__media caption__media--top alert__media">
                            <svg className="icon icon--extra-small icon--inherited" data-vft="icon-modifiers">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-block" />
                            </svg>
                        </div>
                        <div className="caption__text caption__text--top alert__text">
                            Please enter valid mobileno
                        </div>
                    </div>
                </div>
                <input type="number" className="form__input form__input--dark" name="mobileno" min={8} max={13} />
                <div id="submit" className="form__row form__row--medium gutter--bottom">
                    <input type="submit" className="button button--primary button--primary--grey button--full-width button--disabled" value="Continue" />
                </div>
            </form >
        );
    }
}

export default NumberCheck;

Answer 1

使用状态切换班级。

import React, { Component } from 'react'

class NumberCheck extends Component {
   this.state = { disabled: true };
   handleOnChange = (event) => {
      if(event.target.value) {
          this.setState({disabled: false});
       }
    }
    render() {

        return (
            <form className="spring spring--sm">
                {/* <div className="errorMsg">{this.state.errors.mobileno}</div> */}
                <div className="alert alert--light alert--warning validation__warning">
                    <div className="caption">
                        <div className="caption__media caption__media--top alert__media">
                            <svg className="icon icon--extra-small icon--inherited" data-vft="icon-modifiers">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-block" />
                            </svg>
                        </div>
                        <div className="caption__text caption__text--top alert__text">
                            Please enter valid mobileno
                        </div>
                    </div>
                </div>
                <input type="number" onChange={this.handleOnChange} className="form__input form__input--dark" name="mobileno" min={8} max={13} />
                <div id="submit" className="form__row form__row--medium gutter--bottom">
                    <input 
                       type="submit" 
                       className={`button button--primary button--primary--grey button--full-width ${this.state.disabled ? 'button--disabled' : ''}`} 
                       value="Continue" 
                     />
                </div>
            </form >
        );
    }
}

export default NumberCheck;

如果表单未填写，请禁用提交按钮并更改按钮的CSS

1 个答案: