Question

我已经创建了一个TextInput，它希望根据长度来更改fontColor

handleInput = text => {
  this.setState({ input: text });
}
...
<TextInput
  style={{ color: this.state.input.length > 0 ? 'green' : 'red' }}
  onChangeText={this.handleInput}
/>

我的理解是，每次state的更改都会发生一次重新渲染，因此它应该能够重新计算该表达式并显示green的颜色，但是事实并非如此，字体将仅显示red颜色。

我创建了一个可复制的小吃：https://snack.expo.io/ryXHyeWJH

Answer 1

签出类名包。使用npm install类名--save安装。它使条件样式变得容易。使用类似className={classNames({ this.state.input.length > 0 ? 'color-green' : 'color-red' })}的内容。请注意，您必须创建这些CSS类。

Answer 2

最终，我发现此类问题仅发生在那些不受控制的TextInput组件上。

<TextInput
  style={{ color: this.state.input.length > 0 ? 'green' : 'red' }}
  onChangeText={this.handleInput}
/>

如果它是受控组件，则样式将正确应用如下

<TextInput
  style={{ color: this.state.input.length > 0 ? 'green' : 'red' }}
  value={this.state.input}
  onChangeText={this.handleInput}
/>

条件样式似乎不起作用？

2 个答案: