Очистить текст Ввод данных после нажатия кнопки отправки в реагировать родной

Question

Привет. Я хочу очистить текст после отправки значения 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>
    )
}

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

Надеюсь, это поможет!

Answer 2

вы можете использовать ссылку из вашего TextInput и назначить свой текст непосредственно, например

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

, чтобы получить ссылку TextInput, вы можете использовать этот подход

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

, поэтому внутри вашего текстового обратного вызова или любого другого компонента, если у вас есть ссылка вашего TextInput, вы можете использовать его как

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

Answer 3

Вот фрагмент кода для вашей проблемы с решением.

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

}

Answer 4

Вы можете попробовать это:

добавить эту функцию:

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

, а затем:

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

Answer 5

Вызовите arg onSubmit ()

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

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

          setText('')
        }