Question

我想制作一个“数字”组件，该组件在输入时接受数字。我试图做到，但是没有用。

此处是代码-


import React, { Component } from 'react';
import { TextInput } from 'react-native';

    constructor(props)
    {
    super(props);
    this.state = {
      text: ''
    };}

   handleInputChange = (text) => {
    if (/^\d+$/.test(text)) {
      this.setState({
        text: text
      });
    }
  } 

  const NumberInput = (props) => {
          return (
      <TextInput
        keyboardType='numeric'
        onChangeText={this.handleInputChange}
        value={this.state.text}
      />
    )
  }
 export { NumberInput };

Answer 1

您无权访问功能组件中的this，需要将其定义为基于类的组件，

class NumberInput extends Component{
  constructor(props){
    super(props);
    this.state = {
      text: ''
    };
  }

  handleInputChange = (text) => {
    if (/^\d+$/.test(text)) {
      this.setState({
        text: text
      });
    }
  } 

  render(){
    return (
      <TextInput
        keyboardType='numeric'
        onChangeText={this.handleInputChange}
        value={this.state.text}
      />
    )
  }
}

更新

您也可以尝试

<TextInput
   keyboardType='numeric'
   onChange={this.handleInputChange}  //onChange instead of onChangeText
   value={this.state.text}
/>

您的功能应该是

handleInputChange = (e) => {
  if (/^\d+$/.test(e.target.value)) {
     this.setState({
        text: e.target.value
     });
  }
}

Reference to this change.

Answer 2

此外，您可以使用Number（）函数检查输入是否为数字。不会，它将返回NaN

Answer 3

在使用构造函数并使用super或在react中将useState与useState一起使用时，应该使用类组件

     class NumberInput extends Component{
      constructor(props){
        super(props);
        this.state = {
          text: ''
        };
      }


      handleInputChange = (text) => {
        if (/^\d+$/.test(text)) {
          this.setState({
            text: text
          });
        }
      } 

      render(){
        return (
          <TextInput
            keyboardType='numeric'
            onChangeText={this.handleInputChange}
            value={this.state.text}
          />
        )
      }
    }

或在使用功能组件时使用以下形状


    import useState from'react'

        function NumberInput (){
      const [text, setText] = useState('');


      handleInputChange = (text) => {
        if (/^\d+$/.test(text))(setText(text)) ;

        }
      } 

        return (
          <TextInput
            keyboardType='numeric'
            onChangeText={this.handleInputChange}
            value={text}
          />
        )
      }
    }

如何在React Native中制作一个“数字”组件

3 个答案: