React输入框如何提取输入内容中的自然数？

你需要调整输入处理逻辑，允许用户输入任意字符，同时提取其中的数字输出到控制台。修改后的完整代码如下：

export default class UserPhone extends Component {
  constructor() {
    super();
    this.state = {
      operatorValueState: "",
    };
    this.inputOperatorReference = React.createRef();
    this.operatorValueHandler = this.operatorValueHandler.bind(this);
  }

  operatorValueHandler(e) {
    const inputValue = e.target.value;
    // 同步用户的原始输入到状态，让输入框显示所有输入内容
    this.setState({ operatorValueState: inputValue });
    // 过滤掉所有非数字字符，提取出纯数字字符串
    const extractedNumbers = inputValue.replace(/\D/g, '');
    // 将提取后的自然数输出到控制台
    console.log(extractedNumbers);
  }

  componentDidMount() {
    this.inputOperatorReference.current.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={this.inputOperatorReference}
          value={this.state.operatorValueState}
          onInput={this.operatorValueHandler}
        />
      </div>
    );
  }
}

核心修改说明： #

• 删掉了原有的输入限制正则，不再阻止用户输入非数字字符
• 用replace(/\D/g, '')全局匹配并移除所有非数字内容，快速提取纯数字
• 输入框始终保留用户的原始输入内容，满足“可输入任意字符”的需求
• 每次输入时实时提取数字并输出到控制台

内容的提问来源于stack exchange，提问作者max_