ReactJS - 如何让用户只输入整数

Question

我会尽力为您提供帮助，以下是需要翻译的内容：

我想编写if else语句，以允许用户在TextArea中只输入整数，但我不知道该如何实现。

以下是我的代码：

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 {

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

}

导出默认的应用程序；

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

- Vladimir Todorov

Answer 1

您可以使用正则表达式并有条件地改变状态。

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

- mradziwon

---

这是完美的答案。当你有正则表达式时，为什么要使用外部库呢？ - Ahmad Maleki

Answer 2

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

- Anatoli Klamer

Answer 3

考虑使用 ValidatorJS 库，而不是自己编写验证方法。

在您的代码中，示例用法如下...

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

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

我建议使用经过全面测试的验证库，这将减少未来的安全问题。此外，validator非常易于实现。

- canaan seaton

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

希望能对你有所帮助！:)

- Satrio Adi Prabowo