How do I clean Input after saving the data?

Asked

Viewed 3,478 times

1

export default class Calculo extends Component{

    constructor(props){
        super(props)

        this.state = {
            data: '',
            horario: '',
            ctTotalInput: '',
            ldlInput: '',
            hdlInput: '',
            vldlInput: ''            
        }

        this.salvarDados = this.salvarDados.bind(this)
    }

    salvarDados = () => {
      let state = this.state

      db.transaction(function(tx) {
        tx.executeSql(
          'INSERT INTO AppMedico ( ColesTotal, ColesLDL, ColesHDL, ColesVLDL) VALUES (?,?,?,?)',
          [ state.ctTotalInput, state.ldlInput, state.hdlInput, state.vldlInput],
          (tx, results) => {
            alert('Results', results.rowsAffected)
            if (results.rowsAffected > 0) {
              Alert(
                'Registered Successfully'
              )
            } else {
              alert('Registration Failed');
            }
          }
        )
      })
      this.props.navigation.navigate('Historico')
    }

    componentDidMount(){
      let date = new Date().getDate(); //Current Date
      let month = new Date().getMonth() + 1; //Current Month
      let year = new Date().getFullYear(); //Current Year
      let hours = new Date().getHours(); //Current Hours
      let min = new Date().getMinutes(); //Current Minutes
      let sec = new Date().getSeconds(); //Current Seconds

      let s = this.state
      s.data = `${date}/${month}/${year}`
      s.horario = `${hours}:${min}:${sec}`
      this.setState(s)
    }

    render(){
        return(

          <View style={styles.container}>

            <Text style={styles.text}> Informe os valores do exame </Text>

            <Item floatingLabel style={styles.area}>
              <Label> Colesterol Total </Label>
              <Input  keyboardType="numeric" value={this.state.ctTotalInput} onChangeText={(ctTotalInput) => this.setState({ctTotalInput})}/>
            </Item>

            <Item floatingLabel style={styles.area}>
              <Label> Colesterol LDL </Label>
              <Input  keyboardType="numeric" value={this.state.ldlInput} onChangeText={(ldlInput) => this.setState({ldlInput})}/>
            </Item>

            <Item floatingLabel style={styles.area}>
              <Label> Colesterol HDL </Label>
              <Input  keyboardType="numeric" value={this.state.hdlInput} onChangeText={(hdlInput) => this.setState({hdlInput})}/>
            </Item>

            <Item floatingLabel style={styles.area}>
              <Label> Colesterol VLDL </Label>
              <Input  keyboardType="numeric" value={this.state.vldlInput} onChangeText={(vldlInput) => this.setState({vldlInput})}/>
            </Item>

            <View style={styles.areaButton}>
              <Button style={styles.button} onPress={this.salvarDados}>
                <Text> Salvar </Text>
              </Button>
            </View>

          </View>
        )
    }
}

2 answers

1

Every time you change an input value, your state is updated, as the state is linked with the input, what you need to do after saving is delete the state values, this should update your screen

salvarDados = () => {
  let state = this.state

  db.transaction(function(tx) {
    tx.executeSql(
      'INSERT INTO AppMedico ( ColesTotal, ColesLDL, ColesHDL, ColesVLDL) VALUES (?,?,?,?)',
      [ state.ctTotalInput, state.ldlInput, state.hdlInput, state.vldlInput],
      (tx, results) => {
        alert('Results', results.rowsAffected)
        if (results.rowsAffected > 0) {
          Alert(
            'Registered Successfully'
          )
        } else {
          alert('Registration Failed');
        }
      }
    )
  })
	this.setState({ data: '', horario: '', ctTotalInput: '', ldlInput: '', hdlInput: '', vldlInput: '' })
               
  }
  this.props.navigation.navigate('Historico')
}

0

After using the values just change the value with this.setState({name:''}), example:

class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        name: 'algum valor'
      }
      this.limpar = this.limpar.bind(this);
  }
  limpar() {
      this.setState({name:''});      
  }
  render() {
      return (
        <div>
          <input type="text" value={this.state.name} />
          <button onClick={this.limpar}>Limpar</button>
        </div>
      )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Ref. React Native - State

Browser other questions tagged

You are not signed in. Login or sign up in order to post.