基本上我有一个组件可以像TextInput
一样运行,如下所示
//Input.js
import React from 'react';
import { Text, TextInput, View } from 'react-native';
const Input = ({ label, value, onChangeText }) => {
const { inputStyle, containerStyle, labelStyle } = styles;
return (
<View style={containerStyle}>
<Text style={labelStyle}>{ label }</Text>
<TextInput
style={inputStyle}
onChangeText={onChangeText}
value={value}
/>
</View>
);
};
我还有另一个组件,它利用上面Input
组件的输入
//InputForm.js
import React, { Component } from 'react';
import { Button, Card, CardSection, Input } from './common';
class LoginForm extends Component {
state = { text: '' };
render() {
return (
<Card>
<CardSection>
<Input
autoCorrect={false}
value={this.state.text}
onChangeText={text => this.setState({ text })}
label='Email'
/>
</CardSection>
<CardSection />
<CardSection>
<Button>
Login
</Button>
</CardSection>
</Card>
);
}
}
export default LoginForm;
如第一Input.js
所示,我们只收到label, value, onChangeText
作为道具,在我的InputForm.js
中,我传递了一个额外的道具autoCorrect
。现在发生的事情是,自动建议被禁用了。
如果我错了,请纠正我,Input
组件是一个自定义组件,它不应该理解autoCorrect
的含义,因为我从未定义过Input.js
的行为。那么为什么它有效呢?
autoCorrect 的默认值为 true:https://facebook.github.io/react-native/docs/textinput.html#autocorrect
在第二个示例中,您不会看到任何效果,因为您没有像正确所说的那样覆盖 TextInput 中的 autoCorrect 道具。