Reactjs InputGroup中的NativeBase多个图标

我正在尝试制作一个具有两个图标或一个图标和一个按钮的

InputGroup

应使用一个图标检查输入字段是否为空（使其正常工作）。应使用另一个图标或按钮将一些文本“注入”到

输入

字段中

当前我的代码如下所示：

import React, { Component } from 'react'
import { Content, List, InputGroup, Input, Icon, Button } from 'native-base'
export default class AddEquipment extends Component {
  constructor(props) {
    super(props)

    this.state = {
      parameters:  {
        one: {value:"", hint: "One"},
        two: {value:"", hint: "Two"},
        three: {value:"Valid", hint: "Three"}
      }
    }

    this.updateParameter = this.updateParameter.bind(this)
    this.validationStyle = this.validationStyle.bind(this)
  }

  componentDidMount() {

  }

  updateParameter(key, value) {
    newState = {...this.state}
    newState.parameters[key].value = value
    this.setState = newState;
  }

  validationStyle(text) {
    color = text === "" ? "#b03939" : "#649370"
    return (
      { marginRight:25, color
      }
    )
  }

  render () {
    return (
      <Content>
        { Object
          .keys(this.state.parameters)
          .map( key =>
            <InputGroup
              key={`${key}_InputGroup`}
              iconRight
              borderType='regular'
              style={{margin:5}}
              >

              <Input
                placeholder={this.state.parameters[key].hint}
                onChangeText={(text) => {
                  console.log(this.state.parameters)
                  this.updateParameter(key, text)} }
                value={key.value}
              />

              <Icon
                key={`${key}_validIcon`}
                name={ this.state.parameters[key].value === "" ? 'ios-alert' : 'ios-checkmark-circle'}
                style={ this.validationStyle(this.state.parameters[key].value) }
              />

              <Icon
                key={`${key}_injectNA`}
                name='ios-beer'
                onPress={() => this.updateParameter(key, "Cheers!") }/>

            </InputGroup>
          )
        }
      </Content>
    )
  }
}

import React，{Component}来自“React”
从“本机基础”导入{内容、列表、输入组、输入、图标、按钮}
导出默认类AddEquipment扩展组件{
建造师（道具）{
超级（道具）
此.state={
参数：{
一：{value:，提示：“一”}，
二：{value:，提示：“二”}，
三：{值：“有效”，提示：“三”}
}
}
this.updateParameter=this.updateParameter.bind（this）
this.validationStyle=this.validationStyle.bind（this）
}
componentDidMount（）{
}
updateParameter（键、值）{
newState={…this.state}
newState.parameters[key].value=value
this.setState=newState；
}
验证样式（文本）{
颜色=文本==“”？“#b03939”：“#649370”
返回(
{marginRight:25，彩色
}
)
}
渲染（）{
返回(
{对象
.keys（此.state.parameters）
.map（键=>
{
console.log（this.state.parameters）
this.updateParameter（键，文本）}
value={key.value}
/>
this.updateParameter（键“干杯！”）}/>
)
}
)
}
}

这给了我以下的结果

第一期 正如你所看到的，我很难让另一个图标出现——它似乎不在第一个图标后面

按钮也可以，但它总是落在

输入的下方，而不是旁边。样式不是我最强大的风格——因此我使用了很棒的框架NativeBase

第二期
我遇到的另一个问题是，在更新
状态
后，验证似乎没有改变图标和颜色。好像<代码>样式>代码>只加载一次。
 关于<强>第一个问题<强>，你会考虑前面的有效图标吗？InputGroup最多可以显示两个图标：文本输入前后，请参见下面的代码

在第二个问题上，您为状态赋值，而在React中，您应该调用this.setState（newState），请参阅

另一个问题是通过key.value访问对象key的值，而key只是一个字符串（key name），而实际对象是通过this.state.parameters[key]访问的

以下代码修复了所有提到的问题（但有效性图标位于左侧）：

import React，{Component}来自“React”
从“本机基础”导入{内容、列表、输入组、输入、图标、按钮}
const errorStyle={color:#b03939}
const validStyle={color:#649370}
导出默认类AddEquipment扩展组件{
建造师（道具）{
超级（道具）
此.state={
参数：{
一：{value:，提示：“一”}，
二：{value:，提示：“二”}，
三：{值：“有效”，提示：“三”}
}
}
this.updateParameter=this.updateParameter.bind（this）
}
componentDidMount（）{
}
updateParameter（键、值）{
让newState={…this.state}
newState.parameters[key].value=value
this.setState（newState）；
}
静态验证样式（文本）{
返回文本==“”？错误样式：validStyle；
}
渲染（）{
返回(
{对象
.keys（此.state.parameters）
.map（键=>
{
console.log（this.state.parameters）
this.updateParameter（键，文本）}
value={this.state.parameters[key].value}
/>
this.updateParameter（键“干杯！”）}/>
)
}
)
}
}
非常感谢您抽出时间来帮助我。我不能在圣诞节之前和之后测试你的答案。但是我确实相信它会起作用，因为我遇到并看到我应该在
输入之前放置第一个
图标
，顺便说一句，我必须这样做
。forceUpdate
要更新验证图标，您不需要使用上面的代码，因为setState（）将调用rerender。使用forceUpdate，您解决了setState的滥用问题；-）从IconGroup中删除“iconRight”属性非常重要。实际上，在输入之前或之后放置图标并没有什么区别，只是更具可读性，但关键是当iconRight指定仅显示一个图标时，当iconRight=false时，第一个图标显示在左侧，第二个图标显示在输入字段的右侧。非常感谢您的帮助。它真的帮助我继续前进
import React, { Component } from 'react'
import { Content, List, InputGroup, Input, Icon, Button } from 'native-base'

const errorStyle = {color: "#b03939"}
const validStyle = {color: "#649370"}

export default class AddEquipment extends Component {
  constructor(props) {
    super(props)

    this.state = {
      parameters:  {
        one: {value:"", hint: "One"},
        two: {value:"", hint: "Two"},
        three: {value:"Valid", hint: "Three"}
      }
    }

    this.updateParameter = this.updateParameter.bind(this)
  }

  componentDidMount() {

  }

  updateParameter(key, value) {
    let newState = {...this.state}
    newState.parameters[key].value = value
    this.setState(newState);
  }

  static validationStyle(text) {
    return text === "" ? errorStyle : validStyle;
  }

  render () {
    return (
      <Content>
        { Object
          .keys(this.state.parameters)
          .map( key =>
            <InputGroup
              key={`${key}_InputGroup`}
              borderType='regular'
              style={{margin:5}}
              >

              <Icon
                  key={`${key}_validIcon`}
                  name={ this.state.parameters[key].value === "" ? 'ios-alert' : 'ios-checkmark-circle'}
                  style={ AddEquipment.validationStyle(this.state.parameters[key].value) }
                />

              <Input
                placeholder={this.state.parameters[key].hint}
                onChangeText={(text) => {
                  console.log(this.state.parameters)
                  this.updateParameter(key, text)} }
                value={this.state.parameters[key].value}
              />

              <Icon
                key={`${key}_injectNA`}
                name='ios-beer'
                onPress={() => this.updateParameter(key, "Cheers!") }/>

            </InputGroup>

          )
        }
      </Content>
    )
  }
}