ReactJSでユーザー入力の入力を（テキストボックス経由で）保持するためにpropsを使用するには？

Question

私はReactJSを新しくしました。ユーザーが入力した文字列（テキストボックスからのフィード）を小道具に保持させる方法があるのか​​どうかを知りたいのです。

Answer 1

私があなたの質問から理解したことは、ユーザーが入力したユーザー入力の値を保存したいということです。 それを保持する最善の方法は、それを追跡する状態を作ることです。ユーザの入力が変更される可能性があるので、小道ではなく状態に格納する方がよいでしょう。

ここでは、これを行う方法のアイデアを示す簡単な実装を示します。

import React from "react"; 

export default class Bind extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state={ 
      value:'' 
     } 
     this.onChangeInput=this.onChangeInput.bind(this) 
    } 
    render(){ 
     return(
      <div> 
       <div className="well"> 
        <input onChange={this.onChangeInput}/><br/> 
        <cite>{this.state.value}</cite> 
       </div> 
      </div> 
     ); 
    } 
    onChangeInput(event){ 
     this.setState({ 
      value:event.target.value 
     }); 

    } 
} 

実は、このコンポーネントでは、我々は空の値と状態を初期化し、私たちの入力フィールドは、私たちはちょうど更新したその関数にいくつかのfunction.andを呼び出し、変更イベントを使用していたある私たちのrenderメソッドでいます私たちの状態を使用してvalue: event.target.value

私はこれが小道具の代わりに州を使用する方が良いと思いますが、ここで小道具はコンポーネントに使用されるいくつかのデータを渡すだけであり、変更して値を保持できるので、ビューを変更することができます。