Ant Design 验证版式可编辑文本

Question

我正在尝试验证用户何时输入 Antd 设计文本，这样它就不会让他输入除数字之外的其他值，并且 onchange 不会返回任何内容。

"antd": "^4.3.3", “反应”：“^16.13.1”

import React from "react";
import { Typography } from "antd";
const { Text } = Typography;

export default class Demo extends React.Component {
    state = {
        price: 0,
    };

    onChange = (price) => {
        let isValid= validatePriceRegex(price);
        console.log(isValid, "Price:", price);
        this.setState({ price});
    };

    handleChange = (e) => {
        // In this part, I want to validate the input when the user is typing the value
        console.log(e); // dont return anything
    };

    render() {
        return (
            <Text
                onChange={this.handleChange}
                editable={{ onChange: this.onChange }}
            >
                {this.state.price.toString()}
            </Text>
        );
    }
}

const validatePriceRegex = (price) => {
    const regex = /^\$?\d+(,\d{3})*(\.\d*)?$/;
    return price && regex.test(price);
};

Answer 1

您似乎有 2 个关于更改功能的句柄。 handleChange 和 handleChange

可编辑的文本组件只接受 editable 属性内的 onChange，所以你必须在更改功能上做同样的事情

import React from "react";
import { Typography } from "antd";
const { Text } = Typography;

export default class Demo extends React.Component {
  state = {
    price: 0
  };

  onChange = price => {
    let isValid = validatePriceRegex(price);
    console.log(isValid, "Price:", price);
    // you validate here
    if (isValid) {
      this.setState({ price });
    }
  };

  // handleChange = e => {
  //   // In this part, I want to validate the input when the user is typing the value
  //   console.log(e); // dont return anything
  // };

  render() {
    return (
      <Text editable={{ onChange: this.onChange }}>
        {this.state.price.toString()}
      </Text>
    );
  }
}

const validatePriceRegex = price => {
  const regex = /^\$?\d+(,\d{3})*(\.\d*)?$/;
  return price && regex.test(price);
};