React native 反应原材料文本字段不'；不能作为受控输入工作

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

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

this.setState（{firstName}）}
/>

升级后我遇到了这个问题。在库的版本

0.13.0

中，它符合发行说明

已更改

• defaultValue

  prop成为焦点上的当前值

• value

  prop仅提供初始值

根据当前的情况，现在有一种方法可以使用组件的引用来设置和获取值：

let { current: field } = this.fieldRef;

console.log(field.value());

---

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

升级后我遇到了这种情况。在库的版本

0.13.0

中，它符合发行说明

已更改

• defaultValue

  prop成为焦点上的当前值

• value

  prop仅提供初始值

根据当前的情况，现在有一种方法可以使用组件的引用来设置和获取值：

let { current: field } = this.fieldRef;

console.log(field.value());

---

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

在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>
    );
  }
}

import React，{Component}来自'React'；
从“react native material TextField”导入{TextField}；
从“react native”导入{View，Button}；
导出默认类TestComponent扩展组件{
textField=React.createRef（）；
建造师（道具）{
超级（道具）；
此.state={
值：“检查”，
};
}
onChangeText=（）=>{
//通过API发送请求，将值保存在DB中
};
updateText=（）=>{
if（this.textField&&this.textField.current）{
this.textField.current.setValue（'test'）；
}
};
render（）{
返回(
);
}
}

在react native material文本字段中，“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>
    );
  }
}

import React，{Component}来自'React'；
从“react native material TextField”导入{TextField}；
从“react native”导入{View，Button}；
导出默认类TestComponent扩展组件{
textField=React.createRef（）；
建造师（道具）{
超级（道具）；
此.state={
值：“检查”，
};
}
onChangeText=（）=>{
//通过API发送请求，将值保存在DB中
};
updateText=（）=>{
if（this.textField&&this.textField.current）{
this.textField.current.setValue（'test'）；
}
};
render（）{
返回(
);
}
}

react native material textfield
labelTextStyle={{position:'absolute'，left:'100%}
标签：{
fontFamily:fonts.Muli_半黑体，
尺寸：14，
字母间距：0.1，
颜色：颜色。灰色90，
位置：“绝对”，左侧：“100%”
},
onTextChange（值）}
/>

react native material textfield
labelTextStyle={{position:'absolute'，left:'100%}
标签：{
fontFamily:fonts.Muli_半黑体，
尺寸：14，
字母间距：0.1，
颜色：颜色。灰色90，
位置：“绝对”，左侧：“100%”
},
onTextChange（值）}
/>

I在TextField对象中使用了

onLayout={this.loadMyInitialValue}

，因为它是在第一次呈现组件时被调用的。我在TextField对象中使用了

onLayout={this.loadMyInitialValue}

，因为它是在第一次呈现组件时被调用的。

    Touch area in TextView

    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)}
                />