在本机反应中单击提交按钮后，清除文本输入数据答案

【问题标题】：Clear Text Input data once submit button clicked in react native在本机反应中单击提交按钮后，清除文本输入数据
【发布时间】：2020-04-25 18:08:11
【问题描述】：

嗨，我想在 react-native 代码的 Text Input 中提交 val 后清除文本这是我的代码

export default function AddTodo({onSubmit}) {
    const [text, setText] = useState('')
    const changeHandler = (val) => {
        setText(val)
    }
    return (
        <View>
            <TextInput
                style={styles.newInput}
                placeholder="Add task"
                onChangeText={changeHandler}
            />
            <Button onPress={() => onSubmit(text)} title="Add Task" color='#1881e9' />
        </View>
    )
}

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

像这样向你的 TextInput 添加一个值属性

<TextInput
                style={styles.newInput}
                placeholder="Add task"
                onChangeText={changeHandler}
                value = {text}
            />

然后在像这样提交时清除文本

  <Button onPress={() => {
            onSubmit(text)
            setText('') }} title="Add Task" color='#1881e9' />

总代码如下：

import React from 'react';
import {View,Text, TextInput, Button} from 'react-native';
import  {useState} from 'react';
export default function AddTodo({onSubmit}) {
    const [text, setText] = useState('')
    const changeHandler = (val) => {
        console.log("val is",val);
        setText(val)
    }

    return (
        <View style={{marginTop:100}}>
            <TextInput
                placeholder="Add task"
                onChangeText={changeHandler}
                value={text}
            />
            <Button onPress={() => {
                onSubmit(text)
                setText('') }} title="Add Task" color='#1881e9' />
        </View>
    )
}

希望这会有所帮助！

【讨论】：

【解决方案2】：

这里有一个代码 sn-p 用于解决您遇到的问题。

export default function AddTodo({onSubmit}) {
const [text, setText] = useState('')
const changeHandler = (val) => {
    setText(val)
}

const handleSumit = () => {
    // perform the summit operation
    setText("");
}
return (
    <View>
        <TextInput
            style={styles.newInput}
            placeholder="Add task"
            onChangeText={changeHandler}
        />
        <Button onPress={handleSumit} title="Add Task" color='#1881e9' />
    </View>
)

}

【讨论】：

【解决方案3】：

调用无参数 onSubmit()

<Button onPress={() => onSubmitAndClear(text)} title="Add Task" color='#1881e9' />

    const onSubmitAndClear() = (text) => {
            setText(text)
         /// after submit operation then clear

          setText('')
        }

【讨论】：

检查语法，有一些问题。

【解决方案4】：

您可以使用 TextInput 的 ref 并直接分配您的文本，就像

refOfTextInput.setNativeProps({ text: "hello world" })

要获取TextInput 的引用，您可以使用这种方法

<TextInput ref={(ref) => { this.refOfTextInput = ref; }} />

所以如果你有 TextInput 的引用，那么在你的文本回调或任何其他组件中，你可以像使用它一样使用它

        const onSubmitAndClear() = (text) => {
            refOfTextInput.setNativeProps({ text: "hello world" })
        }

【讨论】：

【解决方案5】：

你可以试试这个：

添加此功能：

const clear = () {
  setText('')
}

然后：

<Button onPress={() => {onSubmit(text), clear()} } title="Add Task" color='#1881e9' />

【讨论】：