有条件地禁用react-native中的按钮

Question

I have two input fields and a button:

<Item regular >
    <Input onChangeText={(text) => this.setState({newEmail: text})} value={this.state.newEmail}/>
</Item>

<Item regular >
    <Input onChangeText={(text) => this.setState({confirmEmail: text})} value={this.state.confirmEmail}/>
</Item>

<Button  onPress={() => this.update()} style={styles.updateButton} block> 
    <Text> Send </Text>
</Button>

What I want to do is :

OnTextChange check that : These two fields are == and they pass reg.text(email) I have defined, if so, enable UpdateButton . Else keep it disabled. How do I do such validation in react-native? I tried writing a function for onChangeText in the constructor, but I couldn't get it to work.

I had:

  constructor() {
 super();
this.state = {
newEmail: '',
confirmEmail: '',
};
}

handleEmailChange = (evt) => this.setState({ newEmail: evt.target.value });

<Input onChangeText={this.handleEmailChange} value={this.state.newEmail}/>

Because I tried to handle the input in the handleEmailChange so I could check for both, but after every letter written, the previous would get overwritten. That's the part I'm unsure about. In Angular I have achieved the same using onChange() and then the ngModel to pass the input values and check there. But here I don't know how to pass the values onChangeText AND check

Answer 1

在JSX中，您可以像这样检查。
{this.state.newEmail && this.state.newEmail===this.state.confirmEmail &&
<Button onPress={() => this.update()} style={styles.updateButton} block>
<Text> Send </Text>
</Button>

Answer 2

I'm not familiar with react-native but i think it's easy to redo for react-native too. So my code will based on react :

You can use disabled property of <Button> component like below:

...
this.state = {
  newEmail: '',
  confirmEmail: '',
  isDisabled: false
}
...

My render method looks:

<div>
   New Email <input type="text" name="newEmail" onChange={this.handleEmailChange} value={this.state.newEmail}/> 
   <br/>
   Confirm Email <input type="text" name="confirmEmail" onChange={this.handleEmailChange} value={this.state.confirmEmail}/>
   <br/>
   <button disabled={this.state.isDisabled}>Woot</button>
 </div>

And here is handleEmailChange method:

handleEmailChange(e){
    this.setState({ [e.target.name]: e.target.value }, () => {
        //since we don't know which field we have changed it's good to check in a callback.
        this.setState({isDisabled: this.state.newEmail !== this.state.confirmEmail})
    })
  }

Worked example