Question

我有一个多行TextInput字段，我试图将多行值设置为。

我的文字输入呈现如下：

textInput () {
  return (
    <TextInput
        style={styles.bioBox}
        onChangeText={this.onBioChange}
        value={this.state.bio}
        maxLength={255}
        multiline={true}/>
  )
}

基本上它是一个简短的生物，我希望用户能够编辑它。为此，我试图将TextInput的值设置为bio，我从我的db中获取。

bio的初始状态在构造函数中设置为＆＃34; Loading ...＆＃34;：

this.state = {
  text: "",
  bio:"Loading...",
  picture: "http://sierrafire.cr.usgs.gov/images/loading.gif"
}

然后我获取bio并将其设置为：

fetch(urlPath, queryObject)
  .then(function(res){
    result = JSON.parse(res._bodyText)
    that.setState({  //set that=this in the constructor
      id: result.id,
      first_name : result.first_name,
      name: result.name,
      age: result.age || 'null',
      picture: result.picture,
      gender: result.gender,
      preference: result.preference,
      bio: result.bio,
      headline: result.headline 
    })
  })

它或多或少以它应该的方式运作。最初文本框呈现＆＃34;正在加载...＆＃34;，然后一旦获取完成，它就会设置状态，并使新值设置为我从查询中返回的任何内容。

奇怪的部分就是这样 - 只有TextInput新值的第一行出现在模拟器中。但是，一旦用户在文本输入内部单击并键入内容，它就立即弹出视图。

此外，我在此框的底部有一个字符倒计时，让用户知道他们剩下多少个字符。发生这种情况时，在单击TextInput之前，此组件引用实际长度，并相应地呈现。因此，如果我有多行文本输入值，例如：

I'm an amateur sailor from NZ.
My favorite color is blue.

只有＆＃34;我是来自新西兰的业余水手＆＃34;将显示在页面上，但字符倒计时将根据两个句子的长度计算。只有在用户点击TextInput和类型内部之后，才会＃34;我最喜欢的颜色是蓝色。＆＃34;渲染。

如果这是相关的，我的样式如下：

bioBox:{
    flex: 1,
    paddingLeft: 5,
    height: 100, 
    borderColor: 'gray',
    borderWidth: 2,
    marginRight: 50,
    borderRadius: 5,
    backgroundColor: 'white',
    fontSize: 15,
    fontFamily: "HelveticaNeue-Light",
},

多行TextInput字段中的值未完全呈现。 React Native

0 个答案: