本机基础动态显示成功或错误输入答案

【问题标题】：Native base dynamically show success or Error input本机基础动态显示成功或错误输入
【发布时间】：2016-11-03 04:19:37
【问题描述】：

我想要两个简单的输入框。

有一个登录名输入框，一个密码输入框。

目前我将这两个输入框的值映射成一个“状态”。

现在，使用 NativeBase。我如何像他们在演示中那样动态显示“成功”“错误”？ http://nativebase.io/docs/v0.5.9/components#successInputTextbox

【问题讨论】：

标签： reactjs react-native native-base

【解决方案1】：

传递一个prop success 相当于传递success={true}

所以如果你有像 inputSuccess 和 inputError 这样的状态变量，你可以这样做：

<InputGroup 
  iconRight 
  success={this.state.inputSuccess ? true : false} 
  error={this.state.inputError ? true : false}>
  <Icon name='ios-checkmark-circle' style={{color:'#00C497'}}/>
  <Input placeholder='Textbox'/>
</InputGroup>

【讨论】：

非常感谢！
我试过了，但它不起作用。你能解释一下吗？
@DineshSpartacus 上面的代码应该适用于native-base 0.5.x。 API 发生了变化，尤其是在 2.x.x 之后。您必须相应地更改您的代码。

【解决方案2】：

Native Base 文档（2.12 版）有 this example:

state = { error: 'Some error' };
// ...
<Content>
  <Item error={this.state.error !== ''}>
    <Input 
      placeholder='Textbox with Error Input'
      error={'#d50000'}
    />
    <Icon name='close-circle' />
  </Item>
</Content>

<Input />里面的error prop是设置错误颜色。在 item error 属性中设置了无效状态。

【讨论】：

【解决方案3】：

基唐Himanshu回答。不需要设置false，这是成功和错误的默认值。另外，你还可以使用条件来改变de icon！

<InputGroup 
  iconRight 
  success={this.state.inputSuccess} 
  error={this.state.inputError}>
  <Icon name={this.state.inputSuccess ? 'checkmark-circle' : 'close-circle'}/>
  <Input placeholder='Textbox'/>
</InputGroup>

【讨论】：