react-native-material-textfield 不能作为受控输入答案

【问题标题】：react-native-material-textfield Doesn't work as a controlled inputreact-native-material-textfield 不能作为受控输入
【发布时间】：2020-06-28 09:15:30
【问题描述】：

我正在使用“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})}
            />

【问题讨论】：

标签： react-native textfield controlled-component

【解决方案1】：

我在升级后遇到了这个问题。在库的版本0.13.0 中，根据发行说明，它是switched to being a fully uncontrolled component。

已更改

defaultValue prop 成为焦点的当前值

value prop 只提供初始值

基于当前的usage docs，现在公开了一种方法，用于使用组件的 ref 设置和获取值：

let { current: field } = this.fieldRef;

console.log(field.value());

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

【讨论】：

我在 TextField 对象中使用了onLayout={this.loadMyInitialValue}，因为它在组件第一次渲染时被调用。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：