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：

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

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

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

2 个答案: