web-dev-qa-db-ja.com

クリアReact Native TextInput

React NativeのRedux AddTodoの例を使用します。以下の最初のAddTodoの例では、状態を使用してTextInput値を保存し、正常に動作します。

class AddTodo extends React.Component{

    constructor(props){
        super(props);
        this.state = { todoText: "" }; 
    }
    update(e){
        if(this.state.todoText.trim()) this.props.dispatch(addTodo(this.state.todoText)); 
        this.setState({todoText: "" }); 
    }
    render(){
        return(
            <TextInput 
                value = {this.state.todoText}
                onSubmitEditing = { (e)=> { this.update(e); } }
                onChangeText = { (text) => {this.setState({todoText: text}) } } />
        );
    }
}

ただし、いくつかのReduxの例に従って、次のコードははるかに短く、送信後にTextInputvalueがクリアされないことを除いて機能します

let AddTodo = ({ dispatch }) => {

  return (
      <TextInput 
          onSubmitEditing = { e => { dispatch(addTodo(e.nativeEvent.text)) } } 
      />
  )
}

OnSubmitEditingからInputText値をクリアする方法はありますか？

javascriptreact-native
23
Dave Pile

TextInputにrefを追加します。次に例を示します。

 <TextInput ref={input => { this.textInput = input }} />

次にthis.textInput.clear()を呼び出して入力値をクリアします

47
Kawatare267

デフォルトのクリアテキストボタンが表示されます。

<TextInput clearButtonMode="always" />
11
Aseem

私はネイティブベースを使用しています

constructor(props) {
    super(props);
    this.searchInput = React.createRef();
}

<Input
    placeholder="Search"
    ref={this.searchInput}
/>

クリアしたいときはいつでも

    this.searchInput.current._root.clear();

参照 https://github.com/facebook/react-native/issues/1884

4
Fadi Abo Msalam

React 16. の後の変更と推奨に従って、React.createRefを使用してコンストラクターでrefを取得する必要があります。

コンストラクター関数で：this.myTextInput = React.createRef();

レンダリング機能で：

<TextInput ref={this.myTextInput} />

そして、あなたは電話することができます

this.myTextInput.current.clear();

[1] https://reactjs.org/docs/refs-and-the-dom.html

3
Marcio S Galli

次のコードサンプル：

<TextInput 
    onChangeText={(text) => this.onChangeText(text)} 
    ref={component => this._textInput = component}
    onSubmitEditing={() => {
       this.clearText()
     }}
/>

clearText(){
  this._textInput.setNativeProps({ text: ' ' });

  setTimeout(() => {
    this._textInput.setNativeProps({ text: '' });
   },3);
}
1
Gurbela

これは私のために働く

  ref={element => {  
          //Clear text after Input
                this.attendee = element
              }}
              onSubmitEditing={this.handleAddPress}

andthis.attendee.setNativeProps({ text: '' }) //入力後にテキストをクリア

1
Hansa Tharuka

React Native OnSubmitEditingのTextInputをクリアするためにこのコードを作成します。スナックを確認できます。 https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

コードは次のとおりです。

state = {
    searchInput:'',
    clearInput:false
}
render(){
  return(



  <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
    <TextInput 
            style={{
              borderColor:'black',
              borderWidth:1,
              width:200,
              height:50
            }}
              onChangeText={(searchInput)=>this.setState({
                searchInput
              })}
              value={!this.state.clearInput ? this.state.searchInput : null}
              onSubmitEditing={()=>{
                this.setState({
                  clearInput:!this.state.clearInput,

                })

              }}
     />
</View>
)

}
0
Andreh Abboud

これは私のために働いた..

コンストラクターでmyTextInputを初期化します。

this.myTextInput = React.createRef();

レンダリング機能で参照を追加します。

<Input ref={this.myTextInput} />

そして、あなたは電話することができます

this.myTextInput.current.value='';
0
mharindu

より単純なアプローチの1つは、valueのTextInputプロパティを使用し、コンポーネントの状態値オブジェクトを使用してtextInputの値を設定することです。

state = {
   inputTextValue : '',
}

submitText = () => {
    //handle the click action

    //add this line at the end of the function after you are done handling with the input text value.
    this.state.inputTextValue = '';
}  

<TextInput 
       onChangeText={(text) => this.setState({ inputText: text })}
       placeholder="Monday's breakfast"
       value={this.state.inputTextValue}
 />
 <TouchableOpacity 
       onPress={() => this.submitText()}>
       <Text>Submit</Text>
 </TouchableOpacity>
0
Ezio