Question

我正在尝试使用if else语句来允许用户只在TextArea中键入整数，但我不知道如何。这是我的代码：

class App扩展了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>
    );
}

}

class TextArea扩展了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 {

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>
    );
}

}

导出默认App;

你能给我一些想法或一些例子吗？

Answer 1

您可以使用regex并有条件地更改状态。

   onChange(event){
      const regex = /^[0-9\b]+$/;
      const value = event.target.value;
      if (value === '' || regex.test(value)) {
         this.setState({ value })
      }
   }

Answer 2

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

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

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

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

我建议使用经过全面测试验证的库，因为这样可以减少安全问题。此外，validator非常容易实现。

Answer 3

可以是这样的： <input type="number" min="0" step="1"/>

Answer 4

您可以使用正则表达式（正则表达式）来处理它。您使用的正则表达式是/[0-9]+/g。

例如，您输入了：

<input value={this.state.value} onChange={this.onChange}/>

onChange：

  onChange(text) {
    let newText = '';
    const numbers = '^[0-9]';
    for (let i = 0; i < text.length; i++) {
      if (numbers.indexOf(text[i] > -1)) {
        newText += text[i];
      }
      this.setState({ currencyValue: newText });
    }
  }

或者像这样：

onChange(e){
    const re = /^[0-9\b]+$/;
    if (e.target.value == '' || re.test(e.target.value)) {
        this.setState({currencyValue: e.target.value})
    }
  }

它可以帮到你！：）

ReactJS - 如何允许用户只键入整数

4 个答案: