React/Redux、ユーザ入力の取得方法

Question

私はusage with React Reduxチュートリアルに従っています。私が実際に得られないものは、ユーザー入力を取得する方法です。

彼らは、そのmapDispatchToProps

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    onClick:() => { 
     dispatch(setVisibilityFilter(ownProps.filter)) 
    } 
    } 
} 

あるので、それが接続されているプレゼンテーションのコンポーネントにそのownProps.filterを注入FilterLinkコンテナを構築。このコンテナがどのように構築されているかを確認すると、

const Footer =() => (
    <p> 
    Show:{" "} 
    <FilterLink filter="SHOW_ALL">All</FilterLink>{", "} 
    <FilterLink filter="SHOW_ACTIVE">Active</FilterLink>{", "} 
    <FilterLink filter="SHOW_COMPLETED">Completed</FilterLink> 
    </p> 
) 

[フィルタ]プロパティがあります。それは明らかです。

今、私は同じ例でテキストフィルタを構築したいと思います。だから、最初にここに私のプレゼンテーションコンポーネント

const TodoSearch = ({onSubmit}) => (
    <form 
     onSubmit={e => { 
      e.preventDefault() 
      onSubmit() 
     }} 
    > 
     <input placeholder="Text search" /> 
     <input type="submit" value="Go" /> 
    </form> 
) 

あるしかし、私はコンテナを書くために来るとき、私は、ユーザー入力を取得する方法がわからない

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmit:() => { 
      dispatch(setTextSearch(????)) 
     } 
    } 
} 

それは私はjQueryの$で行うと何か（＃テキストです）.val（）しかし...それは最善の方法ですか？

その後、同じチュートリアルで、リストにToDoを追加するための小さなフォームを作成します。さて、彼らがどのように入力を捕まえるのか見てみましょう。

let AddTodo = ({ dispatch }) => { 
    let input 

    return (
     <div> 
      <form onSubmit={e => { 
       e.preventDefault() 
       if (!input.value.trim()) { 
        return 
       } 
       dispatch(addTodo(input.value)) 
       input.value = '' 
      }}> 
       <input ref={node => { 
        input = node 
       }} /> 
       <button type="submit"> 
        Add Todo 
       </button> 
      </form> 
     </div> 
    ) 
} 

ここで魔法はどこですか？彼らはそのrefトリックで "入力" variabileに価値を注入しましたか？あれは正しいですか？ 20の入力フィールドがある場合、20の異なるREFで20個の変数を使用する必要がありますか？

すべてのヘルプは感謝している、この例では、より良い、そのようなコンポーネントを接続すると、-Reduxのを反応させる一般的な物事の反応-Reduxの方法を理解させるためにここにいるあなたに

Answer 1

送信機能を次のように変更します。 I入力の値を取得するためにREFを使用

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmit: (evt) => { 
      dispatch(setTextSearch(evt.target.querySelector('input').value) 
     } 
    } 
} 

また、

const TodoSearch = ({onSubmit}) => (
    <form 
     onSubmit={e => { 
      e.preventDefault() 
      onSubmit(e) 
     }} 
    > 
     <input placeholder="Text search" /> 
     <input type="submit" value="Go" /> 
    </form> 
) 

Answer 2

に感謝します。入力状態を管理する方法を学ぶためのチュートリアルではありません。

たとえば、ref属性を使用して、<input/> DOMノードのinput変数に割り当てます。次に、この入力DOMノードの値はinput.valueでアクセスできます。

これらは、Uncontrolled Componentと呼ばれるもの、つまりその状態を内部的に処理するコンポーネントを使用します。複雑な形式に対処する必要がなく、この特定のコンポーネントの価値が他の場所で使用されることを意図していない場合に便利です。

しかし、このtodoアイテムのテキストをサーバーに保存する必要があるとしましょう。この入力の値は、この場合はおそらくPOST要求を処理するアクション作成者のどこかで使用することを意図しています。この場合、フォームの値は、あなたのReduxのストアに含まれている、とあなたが今Controlled Component

Answer 3

を扱っているあなたは、ユーザー入力を取得したい場合、あなたはこのような何かを行うことができます。

このデモSearchFormコンポーネントは入力フィールドとアクションをトリガーするボタンをレンダリングします。

import React, { Component, PropTypes } from 'react' 

export default class SearchForm extends Component { 
    constructor(props) { 
    super(props) 
    this.handleGoClick = this.handleGoClick.bind(this) 
    } 

    getInputValue() { 
    return this.refs.input.value 
    } 

    handleGoClick() { 
    this.props.onChange(this.getInputValue()) 
    } 

    render() { 
    return (
     <div> 
     <input ref='input' /> 
     <button onClick={this.handleGoClick}>Go</button> 
     </div> 
    ) 
    } 
} 

入力フィールドがREF値を有することに注意してください。this.refs.input.valueで現在の値を取得できます。 handleGoClickメソッドは、この値をaction creator（mapDispatchToProps経由でコンポーネントの小道具に渡された）に渡します。

Answer 4

、handleSubmit（）メソッドはクラスであるので、REFによって入力を取得することができます。ディスパッチメソッドを使用する場合は、mapDispatchToProps（）内のいくつかのpropをマップするだけです。

class AddTodo extends Component { 

    handleSubmit(event) { 
     let input = this.refs.input; 
     event.preventDefault(); 
     if (!input.value.trim()) { 
      return 
     } 
     this.props.addTodo(input.value); 
     input.value = '' 
    } 

    render() { 
     return (
      <div> 
       <form onSubmit={this.handleSubmit.bind(this)}> 
        <input ref="input"/> 
        <button type="submit"> 
         Add Todo 
        </button> 
       </form> 
      </div> 
     ); 
    } 

} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
     addTodo:(text) => { 

      dispatch(addTodo(text)); 
     } 
    } 
}; 

export default connect(null, mapDispatchToProps)(AddTodo);