响应文本输入值的本机单元

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

所以我用这种方式!

我的 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"
/>;

现在每次用户输入一个文本,编辑后,单位将被添加。