有條件地禁用react-native中的按鈕

Question

我有兩個輸入字段和一個按鈕：

<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>

我想做的是：

OnTextChange檢查：這兩個字段是==，並且它們通過我定義的reg.text(email) ，如果是，請啟用UpdateButton 。 否則將其禁用。 如何在react-native中進行此類驗證？ 我嘗試在構造函數中為onChangeText編寫函數，但無法使其正常工作。

我有：

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

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

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

因為我試圖處理handleEmailChange中的輸入，所以我可以檢查兩者，但是在寫完每個字母之后，前一個字母將被覆蓋。 那是我不確定的部分。 在Angular中，我使用onChange（）然后通過ngModel傳遞輸入值並在那里進行檢查來實現相同的目的。 但是這里我不知道如何傳遞值onChangeText和檢查

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

我對react-native並不熟悉，但是我也很容易重做react-native 。 所以我的代碼將基於react ：

您可以使用<Button>組件的disabled屬性，如下所示：

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

我的render方法如下：

<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>

這是handleEmailChange方法：

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