用于文本输入值的 React Native 单元

Question

我想将单位添加到 textInput 值：

我尝试使用value = { this.state.totalWeight + " Kgs"}，但没有结果！

我也尝试在onSubmitEditing = { () => { this.refs.firstInput.refs.value = this.state.totalWeight + " Kgs" } 中添加" 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。