1

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

我尝试使用 placeholderStyle，但这不适用于我的场景，我不想更改样式，只更改字体粗细。

  <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"
  />

自动完成文本输入的样式

  autoCompleteInputStyle: {
    flexDirection: "row",
    height: 40,
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#cccccc",
    fontSize: 18,
    flex: 1,
    justifyContent: "center",
    marginRight: 14,
    marginBottom: 20,
    paddingLeft: 40,
    color: "#000000",
    borderRadius: 2,
    lineHeight: 21,
    fontFamily: fontStyleFlightCard.fontFamily
  },
    searchedText: {
      fontWeight: "bold"
    },
    placeholderText: {
      fontWeight: "normal"
    },

我希望占位符应该是正常的 fontWeight，当用户输入文本时，它应该是粗体。每当用户键入并从 TextInput 中删除文本时，占位符文本都会更改为正常的 fontWeight。

4

2 回答 2

0

我认为您的问题是！searchText。
确保 !searchText 为true空白。你可能需要让它像

searchText === '' ? placeholderText : searchedText
于 2019-06-13T20:40:15.647 回答
0

我已经通过更改searchTextValue为searchTextunder onChangeTextprop 来使其工作。

您可以查看我在此处制作的示例。

于 2019-06-26T00:37:47.013 回答