react native - How to change state when Button pressed? -
i'm new react native , unfamiliar js.
i want program show wrote in textinput
when pressed button
(there's text
below button
). figured maybe should make 2 state: put state1 text
text
input, , put state2 mimin
textinput
input, , when button pressed
, put state2 mimin
state1 text
.
i've tried code below gave me red page when click button
.
import react, { component } 'react'; import { appregistry, stylesheet, text, button, textinput, alert, view } 'react-native'; export default class hella extends component { constructor(props) { super(props); this.state = {text: '', mimin: ''}; } render() { return ( <view style={styles.container}> <textinput style={{height: 40}} placeholder="type here translate!" onchangetext={(mimin) => this.setstate({mimin})} /> <button onpress={onbuttonpress} title="learn more" color="#841584" accessibilitylabel="learn more purple button" /> <text style={styles.instructions}> {this.state.text} </text> </view> ); } } const styles = stylesheet.create({ container: { backgroundcolor: '#f5fcff', } }); const onbuttonpress = () => { hella.setstate({ text: hella.state.mimin -------> error happened }); }; appregistry.registercomponent('hella', () => hella);
the error was
undefined not object (evaluating 'hella.state.mimin') onbuttonpress <project location>/index.android.js:61
what did wrong? how should declare it? can learn more?
your onbuttonpress
should inside class
since want setstate
export default class hella extends component { constructor(props) { ... } onbuttonpress = () => { this.setstate({ text: this.state.mimin }); } render() { return ( ... <button onpress={this.onbuttonpress} ... /> ... ); } }
react native uses lot of react concepts. learning basics of react lot https://facebook.github.io/react/tutorial/tutorial.html
Comments
Post a Comment