Question

使用React Native中的Redux AddTodo示例。下面的第一个AddTodo示例使用state来存储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示例，以下代码要短得多，除了TextInput value在提交后未被清除

之外

let AddTodo = ({ dispatch }) => {

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

有什么方法可以清除onSubmitEditing的InputText值吗？

Answer 1

将ref添加到TextInput，例如：

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

然后调用this.textInput.clear()清除输入值

Answer 2

它将提供默认的明文按钮。

<TextInput clearButtonMode="always" />

Answer 3

根据React 16.3之后的更改和建议，您将需要使用React.createRef在构造函数中检索引用：

在构造函数中： this.myTextInput = React.createRef();

在渲染功能：

<TextInput ref={this.myTextInput} />

然后您可以致电

this.myTextInput.current.clear();

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

Answer 4

我使用的是母语这就是我的工作方式

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/18843

Answer 5

这对我有用

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

和 this.attendee.setNativeProps({ text: '' }) //输入后清除文字

Answer 6

以下代码示例：

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

Answer 7

一种更简单的方法是使用value的{{1}}属性，并使用组件的状态值对象设置textInput的值。

TextInput

Answer 8

由于使用的是功能组件，因此可以按以下方式使用Hooks。如果您有条件渲染，请检查代码是否在传递给useEffect的函数中定义了todoInput。我假设您的状态变量在依赖项列表中称为todoText。

import {useRef, useEffect} from 'react';


let AddTodo = ({ dispatch }) => {
    const todoInput = useRef();
    useEffect(()=>todoInput.current.clear(),[todoText]);

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

Answer 9

感谢@AndréAbboud的帮助，我能够清除我的TextInput字段，但是根据我的自定义TextInput，我在实现上做了些许更改。

请查看用于实施的代码和方法。据我所知，我已经满足了我需要清除TextInput的要求，如果需要进行任何更改，请在评论中告知。

我所做的就是：

在setupSender.js中

  ...
  this.state = {
    clearInput: false,
    ...
  }

  ...           
  setupSenderSubmit = () => {
      ...
      this.setState({                             
        clearInput: !this.state.clearInput,
      })
      ...
  }
  ...
      <CustomTextInput
        labelText="First Name" 
        onChangeText={(firstName) => this.setState({ firstName })}
        clearInput={this.state.clearInput}
        value={this.state.firstName}
        returnKeyType={ 'next' }
        autoFocus={true}
        onSubmitEditing={() =>  this.input2.current.focus()}
      ></CustomTextInput>
  ...

并在CustomTextInput.js中

  this.state={
    clearInput: this.props.clearInput, 
  }

  ...

  static getDerivedStateFromProps = (props, state) => { 
    if (props.clearInput !== '' || props.clearInput !== undefined) {
      return {
        clearInput: props.clearInput
      }
    }
    return null;
  }

  ...

    <TextInput 
      label={this.props.label} 
      value={!this.state.clearInput ? this.state.text : null}
      onChangeText={(text) => {
          this.setState({text});
          this.props.onChangeText(text)
        }
      }
    </TextInput>

  ...

Answer 10

React-Native使用本机库中的Input组件。这对我有用：

<Input ref={input => {this.textInput = input;}}

然后：

this.textInput._root.clear();

注意：不必使用React.createRef（）进行初始化。

Answer 11

您也可以将 <TextInput/> 的值设置为与状态相同的值，在使用数据后，将状态设置回空字符串：

//state
const [state, setState] = useState({
  name: '',
  lastname: ''
})

//functions
const newUser = () => {
// Do your magic and after
  setState({
    name: '',
    lastname: ''
  })
}

const handleOnChange = () => {
  setState({
    // change your state
  })
}

//render
<TextInput
  value={state.name}
  placeholder='Name'
  onChangeText={/* execute your handleOnChange() */}
/>

<TextInput
  value={state.lastname}
  placeholder='Lastname'
  onChangeText={/* execute your handleOnChange() */}
/>

<Button title='Saved' onPress={() => newUser()} />

希望有用！

Answer 12

为我工作...

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

通话后功能

clearMsg(){

    this.textInput.state.value = ''
}

Answer 13

在我的功能Component上，我与SubmitHandler一起调用了另一个函数，该函数将注意清除文本

const [text, setText] = useState('');
 const anotherFunc = (val) =>{
        setText('');
    }


    return (
        <View>
            <TextInput 
            value ={text}
            onChangeText ={changeHander}
            placeholder = 'Add '
           />
            <Button 
            title = "Add Something "
            onPress = {()=>  {submitHandler(text) , anotherFunc(text)}}
            />

        </View>
    )

Answer 14

      this.state = {
           commentMsg: '',
      }

after submittion 
     if (response.success)
     {
            this.commentMsg.clear();        //TODO me
     }


  <TextInput
     style={styles.textInput}
     multiline={true}
     ref={input => {
     this.commentMsg = input
       }}
     onChangeText={(text) => this.setState({commentMsg: text})}
     placeholder ='Comment'/>

Answer 15

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

         this.name.clear();
         this.email.clear();
         this.password.clear();
         this.confirmPassword.clear();

Answer 16

这对我有用。

在构造函数上初始化myTextInput：

this.myTextInput = React.createRef();

在渲染功能处添加引用：

<Input ref={this.myTextInput} />

然后您可以致电

this.myTextInput.current.value='';

Answer 17

我编写此代码来清除React Native Find中的TextInput 您可以检查我的零食： https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

代码如下：

OnSubmitEditing

Answer 18

对于RN> 0.6

const [msg, setMsg] = useState()

在TextInput内部使用值

<TextInput 
    onChangeText={(txt) => setMsg(txt)}}
    value={msg}
/>

然后在您的按钮按下功能中设置状态

const pressButton = () => {
    setMsg('')
}

清除React Native TextInput

18 个答案: