React Native TextInput 仅显示状态值答案

【问题标题】：React Native TextInput to show only state valuesReact Native TextInput 仅显示状态值
【发布时间】：2021-06-15 22:30:09
【问题描述】：

我试图仅显示 TextInput 中的状态值，但这里似乎并非如此。我有类似以下的内容

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

如果验证函数返回 false，则状态不会更新。但是在 TextInput 字段中输入的值仍然可见。我不确定这是否是预期的行为，但我希望 TextInput 仅显示状态值。

更新：

每个人都建议在验证失败时将 state 设置为 '' 或 initial。这在上面的示例中确实有效，因此感谢您！不幸的是，我正在处理的实际组件没有像我的示例那样将初始输入设置为空字符串 ('')。它在开始时使用未定义/空值。我尝试在 else 部分设置状态，但它在那里不起作用。

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.
            }}
        />
    )
}

抱歉没有使用正确的示例。

【问题讨论】：

标签： reactjs react-native react-functional-component

【解决方案1】：

我不知道我是否完全理解这里的问题。但是当 validate 返回 false 以清除 TextField 时，您是否也需要更新您的状态。

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

【讨论】：

【解决方案2】：

由于验证失败时您的状态不会更新。所以当验证失败时添加 else 条件将文本设置为 state 输入值

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

【讨论】：

【解决方案3】：

如果 validate 返回 false 并且您希望这通过 TextInput 组件中的空字符串反映出来，那么您可以执行以下操作：

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

只需将'' 替换为您想要在文本无效时显示的内容。

【讨论】：