current position:Home>Reactnative foundation - 08 (switch, text input box, textinput)

Reactnative foundation - 08 (switch, text input box, textinput)

2022-01-27 03:26:05 The black cat made a strange mistake

Switches and input boxes : Controlled components , Modify the value and corresponding operation through the status

1、 switch :Switch

        value: On state

        onValueChange: A change in the value triggers

2、 The text box :TextInput

        secureTextEntry: The ciphertext shows

        onChangeText: A change in the value triggers ( Implement two-way binding of data )

export default class App extends Component {
  state = {open: true, uname: '', upwd: ''};
  _valueChanged(open) {  // Incoming value , Is the switching state after switching 
    this.setState({open});
  }
  render() {
    const {open, uname, upwd} = this.state;
    return (
      <View>
        <Switch  value={open} onValueChange={this._valueChanged.bind(this)}></Switch>
        <Switch value={open} onValueChange={open => this.setState({open})}></Switch>

        <View style={
   {flexDirection: 'row', borderWidth: 1, width: 400}}>
           <Text style={
   {fontSize: 25}}> account number :</Text>
           <TextInput
            value={uname}
            onChangeText={uname => this.setState({uname})}
            placeholder=" Please enter your account number "
            style={[ss.input, {flex: 1}]} 
            />
        </View>

        <View style={
   {flexDirection: 'row', borderWidth: 1, width: 400}}>
           <Text style={
   {fontSize: 25}}> password :</Text>
           <TextInput
            secureTextEntry={open}
            value={upwd}
            onChangeText={upwd => this.setState({upwd})}
            style={[ss.input, {flex: 1}]}
            placeholder=" Please input a password "
          />
        </View>
      </View>
    );
  }
}

const ss = StyleSheet.create({
  input: {
    fontSize: 22,
    color: '#333',
    borderWidth: 1,
    padding: 5,
    borderRadius: 5,
    alignSelf: 'center',
  },
});

copyright notice
author[The black cat made a strange mistake],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270326036605.html

Random recommended