store value in view
This commit is contained in:
parent
8ebb47f40c
commit
69e1705d3d
2 changed files with 35 additions and 7 deletions
|
@ -25,25 +25,38 @@ interface State {
|
|||
value: string
|
||||
}
|
||||
|
||||
export default class Input extends Component<any, State> {
|
||||
constructor() {
|
||||
interface Props {
|
||||
value: string;
|
||||
onSubmit: (text: string) => void;
|
||||
}
|
||||
|
||||
export default class Input extends Component<Props, State> {
|
||||
constructor(props : Props) {
|
||||
super();
|
||||
this.state = {
|
||||
value: ''
|
||||
value: props.value
|
||||
};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleChange(value : string) {
|
||||
this.setState({ value });
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
if (this.props.onSubmit) {
|
||||
this.props.onSubmit(this.state.value);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.inputBorder}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={this.state.value}
|
||||
onSubmitEditing={this.handleSubmit}
|
||||
onChangeText={this.handleChange}
|
||||
autoCapitalize="none"
|
||||
underlineColorAndroid="transparent"
|
||||
|
@ -52,7 +65,6 @@ export default class Input extends Component<any, State> {
|
|||
blurOnSubmit
|
||||
enablesReturnKeyAutomatically />
|
||||
</View>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Input />
|
||||
<Input onSubmit={this.handleSubmit} value={this.state.text} />
|
||||
<Text style={styles.text}>
|
||||
Welcome to React Native!
|
||||
</Text>
|
||||
|
|
Reference in a new issue