react-native

Question

我试图在这里放置多个TextInput（第一个联系人，第二个地址），然后在TextInput的末尾放一个清除按钮，清除TextInput的价值。但是，当用户点击个人TextInput时，我发现了如何清除按钮。我试过clearButtonMode="while-editing"，但这并不允许我提供自定义样式。我也试过单TextInput但我想要多个TextInput。这个也是Is there a Cross platform clearButtonMode for Android with React Native＆amp;原始文档建议我setState单独增加我的代码大小。我的代码在这里：

    _handleCrossIcon() {
      //Here code logic which display clear button 
    }
    _handleCloseCrossIcon(index) {
      //Here code logic hide clear button
    }


    render(){
         return(
         <View>
           <View>
             <TextInput style={styles.edit_device_contact_txt}
                        editable = {true}
                        keyboardType = "number-pad"
                        onChangeText={(edit_u_contact) => {this.setState({u_contact: edit_u_contact})}}
                        value={ this.state.u_contact}
                        onFocus={this._handleCrossIcon}
                        onBlur={this._handleCloseCrossIcon}
             />
             <TouchableOpacity onPress={() => this._changeUserName('address_cross')} >
                <Icon style={s.edit_icon} name="ios-close" size={50} color="#00796b"/>
             </TouchableOpacity>
          </View>
          <View>
             <TextInput style={s.detail_txtinput}
                        editable = {true}
                        multiline = {true}
                        numberOfLines = {4}
                        onChangeText={(edit_address) => {this.setState({u_address: edit_address})}}
                        value={this.state.u_address}
                        onFocus={this._handleCrossIcon}
                        onBlur={this._handleCloseCrossIcon}
              />
              <TouchableOpacity onPress={() => this._changeUserName('address_cross')} >
                 <Icon style={s.edit_icon} name="ios-close" size={50} color="#00796b"/>
              </TouchableOpacity>
          </View>
</View>
);
}

任何帮助表示赞赏。提前谢谢。

Answer 1

创建名为InputWithClearButton

的公共组件

https://github.com/zulip/zulip-mobile/blob/10.1.70/src/common/InputWithClearButton.js

并在需要带清除按钮的输入时使用此新创建的组件。像这样

https://github.com/zulip/zulip-mobile/blob/10.1.70/src/common/SearchInput.js#L32

这肯定会减少您的代码大小，并且易于维护。