Question

我有一个TextInput字段，并带有占位符。加载时，占位符文本应显示为fontWeight:"normal"，并且当用户在文本框中输入值时-字母会进入fontWeight:"bold"，但是当文本框再次为空时-占位符应恢复为{{1} }。当前，尽管更改和更新了状态，但是一旦用户在TextInput字段中输入并删除了文本，占位符仍会占用fontWeight:"normal"。

我尝试使用placeholderStyle，但这不是我的情况，我不想更改样式，仅更改字体粗细。

"fontWeight:bold"

autocompleteTextInput的样式

  <TextInput
    style={
      !searchText
        ? [styles.autoCompleteInputStyle, styles.placeholderText]
        : [styles.autoCompleteInputStyle, styles.searchedText]
    }
    underlineColorAndroid="transparent"
    placeholder="Search item"
    placeholderTextColor="#505050"
    autocorrect={false}
    value={searchText}
    onChangeText={searchTextValue => this.onChangeText(searchTextValue)}
    clearButtonMode="while-editing"
    returnKeyType="search"
  />

我希望占位符应使用常规fontWeight，并且当用户输入文本时，应使用粗体。每当用户键入文本并从TextInput删除文本时，占位符文本都会更改为常规fontWeight。

Answer 1

我认为您的问题是！searchText。
确保！searchText为空白时为true。您可能需要使其类似于

searchText === '' ? placeholderText : searchedText

Answer 2

我可以通过在searchTextValue道具下将searchText更改为onChangeText来使其工作。

您可以查看我制作的here示例。

TextInput占位符未采用fontWeight

2 个答案: