2

我正在使用“react-native-material-textfield”进行文本输入。我有一个视图来编辑用户详细信息，它在安装时从 api 获取值并将其设置为状态。但是在将“react-native-material-textfield”升级到“0.16.1”之后，原始名字值不会显示在安装后的文本输入中。我在这里做错了什么？

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

componentDidMount(props) {
   APIcall().then(data)=>{
    this.setState({
      firstName: data.firstName
    });
  }
}

<TextField
              label="First Name"
              value={this.state.firstName}
              onChangeText={firstName => this.setState({firstName})}
            />
4

3 回答 3

1

我升级后遇到了这个问题。在库的版本中，根据发行说明0.13.0，它切换为完全不受控制的组件。

改变了

  • defaultValueprop 成为焦点上的当前值
  • valueprop 只提供初始值

根据当前的使用文档，现在公开了一种方法，用于使用组件的 ref 设置和获取值：

let { current: field } = this.fieldRef;

console.log(field.value());

（就个人而言，虽然我可以理解这种提高性能的原因，因为输入通常可以快速更新状态，但我不喜欢不受控制的组件，因为我希望我的状态来驱动 UI。我觉得这会产生其他实时更新以进行验证非常繁琐。）

于 2020-09-01T10:13:58.290 回答
0

在 react-native-material-textfield 中，'value' 属性作为默认值。要更新您需要使用 ref 的值。使用 React.createRef() 获取 ref，然后使用 setValue 函数

import React, { Component } from 'react';
import { TextField } from 'react-native-material-textfield';
import { View, Button } from 'react-native';

export default class TestComponent extends Component {
  textField = React.createRef<TextField>();
  constructor(props) {
    super(props);
    this.state = {
      value: 'check',
    };
  }

  onChangeText = () => {
    // Send request via API to save the value in DB
  };

  updateText = () => {
    if (this.textField && this.textField.current) {
      this.textField.current.setValue('test');
    }
  };

  render() {
    return (
      <View>
        <TextField
          label="Test value"
          value={this.state.value}
          onChangeText={this.onChangeText}
          ref={this.textField}
        />
        <Button onPress={this.updateText} />
      </View>
    );
  }
}
于 2020-11-06T14:56:15.027 回答
0 
    Touch area in TextView

https://github.com/n4kz/react-native-material-textfield/issues/248

    react-native-material-textfield 
    
    labelTextStyle={{ position: 'absolute', left: '100%' }}
    
     label: {
        fontFamily: fonts.Muli_SemiBold,
        fontSize: 14,
        letterSpacing: 0.1,
            color: colors.gray90,
            position: 'absolute', left: '100%'
      },

 <TextField
    style={style.textInputRight}
    labelTextStyle={style.label}
    labelFontSize={16}}
    onChangeText={value => onTextChange(value)}
                />
于 2020-11-25T12:22:20.427 回答