如何解决使用打字稿将 React Native 中的 UseState 传递给输入框组件并在更改时更新它
我在将使用状态传递给自定义文本输入组件时遇到了一些问题。我想在每次用户在输入框中进行更改时更新符号的状态。使用状态符号不会更新并返回为未定义。
App.tsx
const App = () => {
const [symbol,setSymbol] = useState('AMD');
function handleSymbolChange() {
setSymbol(symbol);
}
return (
<View>
<AppTextInput placeholder="Symbol" icon="activity" value={symbol}
onTextInputChange= {handleSymbolChange}/>
</View>
);
};
}
AppTextInput.tsx
interface Props {
icon: string;
placeholder: string;
value: string;
onTextInputChange: any;
}
const AppTextInput: React.FC<Props> = ({
icon,placeholder,value,onTextInputChange,}) => {
const handleChange = (e: any) => {
onTextInputChange(e.target.value);
console.log(e.target.value);
};
return (
<View>
<Icon name={icon} size={20}/>
<TextInput
style={styles.textInput}
placeholder={placeholder}
value={value}
onChange={handleChange}
/>
</View>
);
};
解决方法
您的代码未按预期运行的原因有两个。
第一个原因是 onTextInputChange
传回一个值 e.target.value
,但您没有在 handleSymbolChange
回调中使用该值。您可能应该将 handleSymbolChange
函数更改为如下所示:
function handleSymbolChange(value: string) {
setSymbol(value);
}
第二个原因是您没有正确使用 e
onChange
回调的 TextInput
参数。如果您查看文档,您将看到 onChange
回调需要具有以下属性的对象:{ nativeEvent: { eventCount,target,text} }
作为参数,而您使用的是 e.target.value
。为了让它工作,你需要把它改成这样:
import {
NativeSyntheticEvent,TextInput,TextInputChangeEventData,View,} from 'react-native';
const App = () => {
const handleChange = ({
nativeEvent: { text },}: NativeSyntheticEvent<TextInputChangeEventData>) => {
onTextInputChange(text);
};
return (
<View>
<TextInput onChange={handleChange} />
</View>
);
};
或者改用 onChangeText
属性:
import { TextInput,View } from 'react-native';
const App = () => {
const handleChange = (text: string) => {
onTextInputChange(text);
};
return (
<View>
<TextInput onChangeText={handleChange} />
</View>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。