给输入框增加必输限制并给出红色提示文字

方式一：使用from表单规则，或者使用各个组件库的封装的表单组件。

方式二：这里主要展开不使用表单组件的方式

refundAmountError：提示不同的报错信息

 this.state = {
      refundAmountError: '', // 添加退款结清时间的错误信息
    };

          <Row style={{ marginTop: "10px" }}>
              <Col sm={6} md={3}>退款结清金额（元）</Col>
              <Col sm={6} md={4}>
                <input placeholder="请输入金额" style={{ width: '100%', }} 
                  value={this.state.refundAmount}
                  onChange={(e) => this.refundAmountChange(e)} />
                   {this.state.refundAmountError && (
                       <span style={{ color: 'red', fontSize: '12px' }}>
                        {this.state.refundAmountError}
                       </span>
                   )}
              </Col>
            </Row>

规则验证函数

validateRefundAmount = (value) => {
    const isNumber = /^\d+(\.\d+)?$/.test(value); // 正则表达式检查是否为正数（包括小数）
    if (!value) {
      return '退款结清金额不能为空';
    } else if (!isNumber) {
      return '退款结清金额必须为数字';
    }
    return ''; // 如果没有错误，则返回空字符串
  };

输入框输入事件

 refundAmountChange = (e) => {
    const value = e.target.value;
    const error = this.validateRefundAmount(value);
    this.setState({ refundAmount: value, refundAmountError: error });
  }