reactjs - InputGroup の NativeBase 複数のアイコン

Question

InputGroup2 つのアイコンまたは 1 つのアイコンと 1 つのボタンを持つを作成しようとしています。

入力フィールドが空であるかどうかを確認するために、1 つのアイコンを使用する必要があります (機能します)。他のアイコンまたはボタンは、フィールドにテキストを「挿入」するために使用する必要がありInputます。

現在、私のコードは次のようになっています。

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>
    )
  }
}

次の結果が得られます

創刊

ご覧のとおり、他のアイコンを表示するのに問題があります。最初のアイコンの後ろにあるようには見えません。

ボタンも同様に優れていますが、常に下にドロップし、Input隣にはドロップしません。スタイリングは私の最強のスタイルではありません - だから私は素晴らしいフレームワーク NativeBase を使用します

第二号

state私が抱えている別の問題は、検証が更新された後にアイコンと色が変更されないように見えることです。style一度だけロードされるようです。