Question

我要验证在文本框中输入的输入是否在范围内。

我在React中有两个文本框

<InputGroup size="sm">
    <Input name="input1" type="number" onKeyPress={this.onKeyPress.bind(this)}  value={this.state.point1}
    onChange={(e) => this.setInputValue(e, 'point1')}
    onBlur={() => this.setSliderValueFromInput('point1')} />
</InputGroup>
<InputGroup size="sm" >
    <Input name="input2" type="number" onKeyPress={this.onKeyPress.bind(this)} value={this.state.point2}
    onChange={(e) => this.setInputValue(e, 'point2')}
    onBlur={() => this.setSliderValueFromInput('point2')} />
</InputGroup>

此功能可确保输入的数字只能是数字

onKeyPress(event) {
    const keyCode = event.keyCode || event.which;
    const keyValue = String.fromCharCode(keyCode);
     if (/\+|-/.test(keyValue))
       event.preventDefault();
   }

现在，如果输入的输入超出特定范围（1.2到3.2），我希望输入1文本框为该文本框，然后将文本框边框颜色变为红色（以显示错误）。

这是一个非常简单的问题，但是我在响应d JavaScript时无法解决它是一个新手。

请帮助

Answer 1

您可以使用内联样式来实现：

<InputGroup size="sm" >
    <Input 
    name="input2" 
    type="number" 
    value={this.state.point2}
    style={
        this.state.point2 < 1.2 || this.state.point2 > 3.2 ? 
        {border: '1px solid red'} :
        {}
    }
    onKeyPress={this.onKeyPress.bind(this)} 
    onChange={(e) => this.setInputValue(e, 'point2')}
    onBlur={() => this.setSliderValueFromInput('point2')} />
</InputGroup>

如何检查文本框值是否在特定范围内

1 个答案: