一个实现样式组件和Scroll视图的原生react应用程序正在工作,但给出了以下警告:
index.js:1 Warning: React does not recognize the `enterKeyHint` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `enterkeyhint` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in input (created by TextInput)
in TextInput (created by Context.Consumer)
in StyledNativeComponent (created by Styled(TextInput))
in Styled(TextInput) (at Signup.js:96)
in div (created by View)
in View (created by ScrollView)
in div (created by View)
in View (created by ForwardRef)
in ForwardRef (created by ScrollView)
in ScrollView (at Signup.js:95)
这是组件的呈现:
return (
<BasicView>
{isLoading && <Preloader/>}
<ScrollView>
LOC 96 -> <BasicInput placeholder="email" value={email} onChangeText={(val) => setEmail(val)}/>
<BasicInput placeholder="password" value={password} onChangeText={(val) => setPassword(val)}
maxLength={15} secureTextEntry={true}/>
<BasicInput placeholder="name" value={displayName} onChangeText={(val) => setDisplayName(val)}/>
<Button title="Signup" onPress={() => registerUser()}/>
<BasicLink onPress={() => props.navigation.navigate(NavigationLocations.LOGIN)}>
Already registered? Click here to log in...
</BasicLink>
</ScrollView>
</BasicView>
)
下面是样式化组件的定义:
export const BasicInput = styled.TextInput`
width: 100%;
margin-bottom: 15px;
padding-bottom: 15px;
align-self: center;
border-color: #ccc;
border-bottom-width: 1px;
`;
enterKeyHint
指的是什么?我应该实现什么样的修正?
发布于 2021-03-02 11:33:52
这个问题来自React Native Web。不确定此文件显示在哪个版本中。无论如何,我回到了0.12.3版本,我不再收到这个警告。
enterKeyHint是用于虚拟键盘的html属性。这是重命名ENTER键的一种方法。https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint
该警告不会出现在Andoid或iOS上。因此,如果您不愿意降级您的React Native web版本,您可以安全地忽略此警告,因为您很可能不需要在Web上重命名虚拟键盘上的ENTER键。
https://stackoverflow.com/questions/66424449
复制相似问题