反应本机 TextInput 以仅显示 state 值

Question

I'm trying to display only the state values within TextInput but that does not seem to be the case here. I have something like the following

const component = () => {
    const [input, updateInput] = useState('');
    return (
        <TextInput
            value={input}
            onChangeText={text => {
                if (validate(text)) {
                    updateInput(text);
                }
            }}
        />
    )
}

If the validate function returns false the state is not updated. But the value entered in the TextInput field is still visible. I'm not sure if this is the expected behavior but I'd like for TextInput to only display the state value.

Update:

Everyone suggested setting state to '' or initial when validation fails. This does work in the example above so thanks for that. Unfortunately the actual component I'm working on does not set initial input to empty string ('') like my example. It works with undefined/null values at the start. I tried setting state in the else section but it didn't work there.

const component = () => {
    const [input, updateInput] = useState();
    return (
        <TextInput
            value={input}
            onChangeText={text => {
                if (validate(text)) {
                    updateInput(text);
                } else updateInput(input); // This does not seem to work.
            }}
        />
    )
}

Apologies for not using the correct example.

Answer 1

As your state is not updated when validation failed. SO just add else condition when validation failed set text to state input value

const component = () => { const [input, updateInput] = useState(''); return ( <TextInput value={input} onChangeText={text => { if (validate(text)) { updateInput(text); }else{ updateInput(input) } }} /> ) }

Answer 2

I don't know if i fully understood the question here. But don't you need to update your state also when validate returns false to clear the TextField.

<TextInput
    value={input}
    onChangeText={text => {
        updateInput(validate(text) ? text : '');
    }}
/>

Answer 3

If validate returns false and you want this to be reflected by an empty string in the TextInput component, then you could do something like this:

const component = () => {
    const [input, updateInput] = useState('');
    return (
        <TextInput
            value={input}
            onChangeText={text => {
                if (validate(text)) {
                    updateInput(text);
                } else {
                    updateInput('');
                }
            }}
        />
    )
}

Just replace the '' with what you want to show when the text is not valid.