web-dev-qa-db-ja.com

ネイティブが必要な反応でテキストフィールドを作成するにはどうすればよいですか

テキストフィールドと送信ボタンがありますが、送信ボタンをクリックしてテキストフィールド内に何も書き込んでいない場合でも、処理が続行されるため、テキストフィールドを必須のテキストフィールドにしたいのですが、方法がわかりません。 ?

5
Arnav Nath

これが、デモ付きのサンドボックスリンク https://codesandbox.io/s/lpx76zq6vm です。ボタンをクリックすると、入力フィールドが空かどうかをチェックする関数をトリガーできます

<Button
          onPress={() => {
            if (this.state.text.trim() === "") {
              this.setState(() => ({ nameError: "First name required." }));
            } else {
              this.setState(() => ({ nameError: null }));
            }
          }}
          title="Login"
  />

そしてあなたのような入力フィールド

<TextInput
          style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
          onChangeText={text => this.setState({ text })}
          value={this.state.text}
        />
        {!!this.state.nameError && (
          <Text style={{ color: "red" }}>{this.state.nameError}</Text>
        )}
6
Aravind S