Erase key Listner react native

Question

I have two TextInput which have some values like box 1 has 47 and box 2 has 3 and the total amount is 50. i want if remove the any value of box1 then change the value of box 2 . then In my code if i remove the first value then no change the 2nd value remove then previous result is shown in box 2 please help me to fix it.

Here's My Code:-

 `constructor(props) {
    super(props);
    this.state = {  box1:"47",
                    box2:"3",
    };
  }
  render(){
     return(
        <TextInput
         value={this.state.box1}
         onChangeText={(box1) => this.setState({box1})}
         onKeyPress={this.onChanged}
         />
         <TextInput
         value={this.state.box2}
         onChangeText={(box2) => this.setState({box2})}      
         />   
     )
  }

onChanged=()=>{
let DailyIncome=50;
let DST = parseFloat(this.state.box1);
let result = DailyIncome - DST;

this.setState({
    box2: result.toString()
  });
}`

Answer 1

Use this code that will help you.

constructor(props) {
        super(props);
        this.state = {  box1:"47",
                        box2:"3",
        };
      }
      render(){
         return(
            <TextInput
             value={this.state.box1}
             onChangeText={(box1) => this.onChangeTextBox1({box1})}
             onKeyPress={this.onChanged}
             />
             <TextInput
             value={this.state.box2}
             onChangeText={(box2) => this.setState({box2})}      
             />   
         )
      }


onChangeTextBox1=(value)=>{
this.setState({box1:value, box2:(50-value)})
}

This will show always addition of 50 in box , while edit the box1 value.use this and let me know