React Native 文本输入值单位

Question

我想为

textInput

值添加一个单位：

---

我尝试使用以下方法，但没有得到任何结果：

value = { this.state.totalWeight + " Kgs"}

---

我还尝试在

" Kgs"

中添加

onSubmitEditing

：

onSubmitEditing={() => { 
    this.refs.firstInput.refs.value = this.state.totalWeight + " Kgs" 
}}

但是还是没有结果！

有什么想法吗？

Answer 1

state = {
   value: "",
   unit: "Kgs"
}
render(){
   return(
     <View style={{flexDirection: 'row', alignItems: 'center'}} >
            <TextInput value={this.state.value} onChangeText={(value) => this.setState({value})} />
            <View style={{marginRight: 10}} >
                <Text>{this.state.value === '' ? '' : this.state.unit}</Text>
            </View>
     </View>       
   );
}

Answer 2

所以我就用这个方法！

我的

state

：

this.state = {
  commodity: "",
  isFilled: false
};

然后我们有：

<TextInput
  style={{ flex: 1 }}
  onChangeText={commodity =>
    this.setState({
      commodity,
      isFilled: false
    })
  }
  value={
    this.state.isFilled ? this.state.commodity + " Unit" : this.state.commodity
  }
  onFocus={() => this.setState({ isFilled: false })}
  onEndEditing={() => {
    if (this.state.commodity == "") {
      this.setState({ isFilled: false });
    } else {
      this.setState({ isFilled: true });
    }
  }}
  placeholder="Commodity"
/>;

现在每次用户输入文本时，编辑后都会添加 UNIT。