React NativeでボタンクリックonPressでテキスト入力入力値を取得する方法は?

アズランアズワー

私はReactNativeを初めて使用し、textInputに入力したものを1つずつ取得できません。

例:いくつかの名前を入力した場合、1つずつ表示されるはずです...

  state = {
    name: "",
    showName: false
  };

  buttonClickListner = e => {
    const { showName } = this.state;

    this.setState({ showName: true });
  };

  render() {
    const { name } = this.state;
    return (
        <TextInput
          style={{ height: 150 }}
          placeholder="Enter a Name...."
          value={name}
          onChangeText={val => {
            this.setState({
              name: val
            });
          }}
        />
        <Button
          onPress={this.buttonClickListner}
          title="Submit"
          color="#008000"
        />
        <Text>{(showName = true ? name : null)}</Text>    
  );
  }
}
パラスコラット

私はあなたが必要なことをしました。そのTextInputに入力する名前のシーケンスが必要ですが、文字列を使用することはできません。入力するすべての値を表示するには、配列を取得する必要があります。

export default class App extends React.Component {
   state = {
    name: [],
    showName: false,
    text:""
  };

  buttonClickListner = e => {
    this.state.name.push( this.state.text.toString() );
    this.setState({text:""})
  };
  render() {
    const { name } = this.state;
    return (
      <View>
        <TextInput
          style={{ height: 150 }}
          placeholder="Enter a Name...."
          value={this.state.text}
          onChangeText={val => {
            this.setState({
              text: val
            });
          }}
        />
        <Button
          onPress={this.buttonClickListner}
          title="Submit"
          color="#008000"
        />
        {this.state.name.length>0?this.state.name.map(item=>(<Text>{item}</Text>)):null} 
        </View>
  );
}
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

React Native:ボタンクリックでテキスト値を取得する方法は?

分類Dev

React Nativeでボタンを押したときにテキスト入力をアクティブにする方法は?

分類Dev

ReactでAPIから結果を取得した後、入力テキストボックスをクリアする方法

分類Dev

ステートレスReactコンポーネントのボタンクリックで入力の値を取得するにはどうすればよいですか?

分類Dev

テキストボックスから入力を取得してReactで印刷するにはどうすればよいですか?

分類Dev

Reactでボタンがクリックされたときに入力フィールドの任意の場所にテキストを直接挿入するにはどうすればよいですか?

分類Dev

Reactで別の入力ボックスをクリックしたときに入力値を変更する方法

分類Dev

Semantic-UI-Reactで、テキスト入力またはドロップダウンにxアイコンを追加して、クリックするとテキストをクリアする方法はありますか?

分類Dev

React Native:iOSディクテーションがテキスト入力をクリアできません

分類Dev

React-Reduxが入力/テキストエリアボックス内でデータを正しくレンダリングしていません

分類Dev

Reactで「キー」を使用して入力ボックス/ボタンの配列をレンダリングする

分類Dev

ボタンを使用してフォームの入力値(React Forms)をインクリメントすることはできません

分類Dev

リセットボタン付きのFormikでreact-select単一入力をリセットする方法

分類Dev

React-ボタンをクリックして入力の値を取得します

分類Dev

React-ボタンをクリックして入力の値を取得します

分類Dev

テキストボックスに入力できません-React

分類Dev

React.jsのフォーム内にないボタンクリック後に入力値をリセットする方法

分類Dev

React Nativeの入力アクセサリがある場合に、フォーカスのあるテキスト入力にスクロールする方法

分類Dev

Reactで入力ラジオボタンの値を取得するにはどうすればよいですか?

分類Dev

React Nativeでパスワードのカスタムテキスト入力を行う方法は?

分類Dev

Reactでクリックした入力からの値でURLを更新する

分類Dev

React-ネイティブはテキストボックスにユーザー入力を表示します

分類Dev

React制御コンポーネントのクリックでデータリスト入力をクリア

分類Dev

React Native戻るボタンを押した後、テキスト入力のためにキーボードを再起動できません

分類Dev

react jsのボタンをクリックするたびに入力フィールドを表示するにはどうすればよいですか?

分類Dev

私はreactでアイテムをマッピングしています。各アイテムの下にコメント用のテキストがあり、1つのボックスに入力すると、すべてのボックスにテキストが表示されます。

分類Dev

react-native-gifted-chatでのテキスト入力を無効にすることは可能ですか?

分類Dev

react-nativeでテキストコンポーネントonPress内にテキストを取得する方法

分類Dev

これはReactの入力をクリーンアップする正しい方法ですか?

Related 関連記事

  1. 1

    React Native:ボタンクリックでテキスト値を取得する方法は?

  2. 2

    React Nativeでボタンを押したときにテキスト入力をアクティブにする方法は?

  3. 3

    ReactでAPIから結果を取得した後、入力テキストボックスをクリアする方法

  4. 4

    ステートレスReactコンポーネントのボタンクリックで入力の値を取得するにはどうすればよいですか?

  5. 5

    テキストボックスから入力を取得してReactで印刷するにはどうすればよいですか?

  6. 6

    Reactでボタンがクリックされたときに入力フィールドの任意の場所にテキストを直接挿入するにはどうすればよいですか?

  7. 7

    Reactで別の入力ボックスをクリックしたときに入力値を変更する方法

  8. 8

    Semantic-UI-Reactで、テキスト入力またはドロップダウンにxアイコンを追加して、クリックするとテキストをクリアする方法はありますか?

  9. 9

    React Native:iOSディクテーションがテキスト入力をクリアできません

  10. 10

    React-Reduxが入力/テキストエリアボックス内でデータを正しくレンダリングしていません

  11. 11

    Reactで「キー」を使用して入力ボックス/ボタンの配列をレンダリングする

  12. 12

    ボタンを使用してフォームの入力値(React Forms)をインクリメントすることはできません

  13. 13

    リセットボタン付きのFormikでreact-select単一入力をリセットする方法

  14. 14

    React-ボタンをクリックして入力の値を取得します

  15. 15

    React-ボタンをクリックして入力の値を取得します

  16. 16

    テキストボックスに入力できません-React

  17. 17

    React.jsのフォーム内にないボタンクリック後に入力値をリセットする方法

  18. 18

    React Nativeの入力アクセサリがある場合に、フォーカスのあるテキスト入力にスクロールする方法

  19. 19

    Reactで入力ラジオボタンの値を取得するにはどうすればよいですか?

  20. 20

    React Nativeでパスワードのカスタムテキスト入力を行う方法は?

  21. 21

    Reactでクリックした入力からの値でURLを更新する

  22. 22

    React-ネイティブはテキストボックスにユーザー入力を表示します

  23. 23

    React制御コンポーネントのクリックでデータリスト入力をクリア

  24. 24

    React Native戻るボタンを押した後、テキスト入力のためにキーボードを再起動できません

  25. 25

    react jsのボタンをクリックするたびに入力フィールドを表示するにはどうすればよいですか?

  26. 26

    私はreactでアイテムをマッピングしています。各アイテムの下にコメント用のテキストがあり、1つのボックスに入力すると、すべてのボックスにテキストが表示されます。

  27. 27

    react-native-gifted-chatでのテキスト入力を無効にすることは可能ですか?

  28. 28

    react-nativeでテキストコンポーネントonPress内にテキストを取得する方法

  29. 29

    これはReactの入力をクリーンアップする正しい方法ですか?

ホットタグ

アーカイブ