store value in view

This commit is contained in:
Jake Howard 2016-09-17 22:38:11 +01:00
parent 8ebb47f40c
commit 69e1705d3d
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 35 additions and 7 deletions

View file

@ -25,25 +25,38 @@ interface State {
value: string value: string
} }
export default class Input extends Component<any, State> { interface Props {
constructor() { value: string;
onSubmit: (text: string) => void;
}
export default class Input extends Component<Props, State> {
constructor(props : Props) {
super(); super();
this.state = { this.state = {
value: '' value: props.value
}; };
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
} }
handleChange(value : string) { handleChange(value : string) {
this.setState({ value }); this.setState({ value });
} }
handleSubmit() {
if (this.props.onSubmit) {
this.props.onSubmit(this.state.value);
}
}
render() { render() {
return ( return (
<View style={styles.inputBorder}> <View style={styles.inputBorder}>
<TextInput <TextInput
style={styles.input} style={styles.input}
value={this.state.value} value={this.state.value}
onSubmitEditing={this.handleSubmit}
onChangeText={this.handleChange} onChangeText={this.handleChange}
autoCapitalize="none" autoCapitalize="none"
underlineColorAndroid="transparent" underlineColorAndroid="transparent"
@ -52,7 +65,6 @@ export default class Input extends Component<any, State> {
blurOnSubmit blurOnSubmit
enablesReturnKeyAutomatically /> enablesReturnKeyAutomatically />
</View> </View>
);
)
} }
} }

View file

@ -21,11 +21,27 @@ const styles = StyleSheet.create({
}); });
export default class App extends Component<any, any> { interface State {
text: string
}
export default class App extends Component<any, State> {
constructor() {
super()
this.state = {
text: ''
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(text : string) {
this.setState({ text });
}
render() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Input /> <Input onSubmit={this.handleSubmit} value={this.state.text} />
<Text style={styles.text}> <Text style={styles.text}>
Welcome to React Native! Welcome to React Native!
</Text> </Text>