在提交时清除所有 textInput 字段反应本机

Posted

技术标签:

【中文标题】在提交时清除所有 textInput 字段反应本机【英文标题】:clearing all textInput field on submit react native 【发布时间】:2021-01-25 09:12:50 【问题描述】:

我想清除按钮按下时的所有文本输入字段,而不是它抛出一个错误说 undefined 不是一个选项,因为试图从 value=this.state.inputTextValue 中获取并清除输入 setState( inputTextValue : '')

const[username, setUsername] = useState("");
  const[mobile, setMobile] = useState("");
  
  const[ isSubmit, setIsSubmit] = useState(false);

  useEffect(() => 
    const order = async () => 
      axios
      .post(
        "*****************",
        JSON.stringify(
          username:username,
          mobile: mobile,
        )
      )
      .then((response) => 
        console.log(response.data);
        setIsSubmit(false);
      )
      .catch((err) => 
        console.log(err);
      );
    ;

    if (isSubmit) order();
  , [isSubmit]);

   const orderHandler = (text) => 
       setUsername(text);     
  ;  

在此处清除 TEXTINPUT ONPRESS 值

   const handleSubmitEdit = () => 
     
    setState(inputTextValue : '')
  ;
  

 return (
         <ScrollView contentContainerStyle=flexGrow: 1
                keyboardShouldPersistTaps='handled'
              >
          
                  <View style=styles.formwrap>
                  
                  <Form style=styles.mainform>
                  <View style=styles.formgroup> 
              <SafeAreaView>


                      <View style=styles.formItems>

这里取值=value=this.state.inputTextValue

                        <TextInput placeholder="Full Name"
                        onChangeText=orderHandler
                        value=this.state.inputTextValue
                        />
                      </View>
                      <View style=styles.formItems>
                        <TextInput  placeholder="Mobile" 
                        style=styles.input
                        keyboardType="phone-pad"
                        onChangeText=(text) => setMobile(text)
                        value=this.state.inputTextValue
                        />
                      </View>
                      <View style=styles.buttonContainer>
                      <TouchableOpacity
                        style=styles.submit
                        onPress=() => setIsSubmit(true),handleSubmitEdit()'>
                        <Text style=[styles.submitText]>ORDER</Text>
                      </TouchableOpacity>                              
                  </View>
                  </SafeAreaView>                                            
                 </View>     
                  </Form>                      
                  </View>    
           </ScrollView>   
 )
;

【问题讨论】:

【参考方案1】:

你得到什么错误?从 React 16 开始,您现在应该使用函数式组件。对于管理,我认为阅读三元运算符更明智。使用状态运算符时,您应该使用带有 USESTATE 运算符状态的 SETTING。请记住,道具仅在状态更改和道具更改时才会呈现。

常量 [foo, setFoo] = useState('')

useEffect(() => 试试

const order = async () => 常量数据 = 等待 axios 。邮政( "******************", JSON.stringify( 用户名:foo ) [])

;

捕捉(错误)

控制台日志(错误)

【讨论】:

Actullay 我想在按下提交按钮后清除文本输入字段mrest一切正常

以上是关于在提交时清除所有 textInput 字段反应本机的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 TextInput 字段在不同的屏幕上表现不同。在本机反应

防止在本机反应中按下 TextInput 时显示系统键盘

如何在本机反应中验证 TextInput 值?

当在反应本机中输入超过 6 个字符时,如何更改 textInput 文本中的字体大小?

当Android Textinput autoFocus为true时反应本机键盘不弹出

在自定义组件中调用 useState Hook 时反应本机 TextInput ReRenders