ReactJS-如何允许用户仅键入整数 [英] ReactJS - How to allow user to type only integers

问题描述

我试图做if else语句，以允许用户仅在TextArea中键入整数，但我不知道如何. 这是我的代码:

I'm trying to make if else statement to allow user to type only integer in TextArea but i have no idea how. This is my code:

类应用扩展了React.Component {

class App extends React.Component {

constructor(props) {
    super(props)

    this.state = {
        currencyValue: '',
        currencyCode: 'USD',
        result: ''
    }
}

handleChangeCurrencyValue(event) {
    console.log('qwer ' + this)
    this.setState(Object.assign({}, this.state, {currencyValue: event.target.value}))
}

handleChangeCurrencyCode(event) {
    console.log('qwer ' + this)
    this.setState(Object.assign({}, this.state, {currencyCode: event.target.value}))
}

calculate(event){
    var obj = this 
    axios.get('http://localhost:8080/Currency/currency?currencyCode=' + this.state.currencyCode + '&currencyValue=' + this.state.currencyValue + '&responseType=json')
    .then(function(resp){
        console.log('RESULT: ', resp.data.result)
            obj.setState(Object.assign({}, obj.state, {result: resp.data.result}))
    })
    .catch(error => {
        console.log(error)
    });
}

render() {
    return (
        <div>
            <TextArea functionChangeValue={this.handleChangeCurrencyValue.bind(this)} value={this.state.currencyValue} />
            <ComboBox functionChangeCode={this.handleChangeCurrencyCode.bind(this)} value={this.state.currencyCode} />
            <p>
                <button onClick={this.calculate.bind(this)}>Calculate</button>
            </p>
            <div>{this.state.result}</div>
        </div>
    );
}

}

TextArea类扩展了React.Component {

class TextArea extends React.Component {

render() {
    return (
        <div>
            <h4>
                <div>Type value you want to exchange: </div>
                <input type='text' onChange={this.props.functionChangeValue}/>
                 {/* <div>Value of your currency is: {this.props.value}</div> */}
            </h4>
        </div>
    );
}

}

ComboBox类扩展了React.Component {

class ComboBox extends React.Component {

render() {
    return(
        <div>
            <h4>
                <div>Select your currency:</div>
                <select onChange={this.props.functionChangeCode}>
                <option>USD</option>
                <option>EUR</option>
                <option>GBP</option>
                </select>
                {/* <div>Your currency is: {this.props.value}</div> */}
            </h4>
        </div>
    );
}

}

导出默认应用；

您能给我个主意还是举例?

Can you give me idea or some example?

推荐答案

考虑使用 ValidatorJS 库，而不是滚动自己的验证方法.

Consider making use of the ValidatorJS Library as opposed to rolling your own validation method.

代码中的示例用法将是这样的...

Example usage in your code would be something like this...

handleChangeCurrencyValue(event) {
    console.log('qwer ' + this)
    const currencyValue = event.target.value;

    if(validator.isInt(currencyValue)) {
        this.setState({ currencyValue });
    }
}

我建议使用经过全面测试的库进行验证，因为这将减少安全隐患.另外，validator非常易于实现.

I recommend using libraries that have been thoroughly tested for validation as this will reduce security concerns down the line. Also, validator is extremely easy to implement.

这篇关于ReactJS-如何允许用户仅键入整数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！