Question

我正在尝试在Input中使用react-number-format。但是，它没有显示默认值，也不允许我编辑输入。

代码如下：

import React, { Component } from 'react';
import { StyleSheet, View, Alert } from 'react-native';
import {
  Container, Header, Content, Card, Input,
  CardItem, Text, Right, Icon, Footer, FooterTab,
  Left, Body, Title, Button, Item }
from 'native-base';
import { Avatar } from 'react-native-elements';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import NumberFormat from 'react-number-format';

class Test extends Component {

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

  componentDidMount() {
    const obj = { ...this.state.myData };

    obj.Amount = '1000';

    this.setState({
      myData: obj
    });
  }

  onChangeText = (text, input) => {
    const obj = { ...this.state.myData };

    obj[input] = text;

    this.setState({
      myData: obj
    });
  };

  render() {
    const { Amount } = this.state.myData;
    return (
    <Container>
      <Header>
        <Left>
          <Button>
            <Icon name='arrow-back' />
          </Button>
        </Left>
        <Body>
          <Title>Test Page</Title>
        </Body>
        <Right />
      </Header>
      <Content>
        <Card>
          <CardItem cardBody>
            <Left>
              <FontAwesome name="money" />
              <Text>Amount</Text>
            </Left>
            <Right>
              <Item>
                <Input
                      value=<NumberFormat
                        value={Amount} displayType={'text'} thousandSeparator prefix={'$'}
                      />
                      onChangeText={(text) => this.onChangeText(text, 'Amount')}
                      style={styles.valueText}
                />
              </Item>
            </Right>
          </CardItem>
        </Card>
      </Content>
    </Container>
    );
  }
}

const styles = StyleSheet.create({
  valueText: {
    color: 'rgb(192, 186, 186)',
    fontSize: 15,
  },
});

export default Test;

这是小吃

https://snack.expo.io/BylKNVkaZr

在输入中使用react-number-format

0 个答案: