は、私は次のコンポーネント持ってReduxのアクションの作成者

Question

にテキストエリアの値を送信：

const myComponent = ({handleClick, default = ''}) => (
    <div> 
    <textarea name="myTextArea" defaultValue={default}></textarea> 
    <button onClick={(myTextArea) => handleClick(myTextArea})}>Done</button> 
    </div> 
) 

派遣マッピング：

const mapDispatchToProps = (dispatch) => { 
    return { 
     handleClick: (myTextArea) => { 
     console.log(myTextArea); // This is syntheticMouseEvent 
     } 
    } 
    } 

myTextAreaは、常にタイプのsyntheticMouseEvent

である私が何か間違ったことをやっていますか？私の価値はどこですか？

Answer 1

ボタンクリックのイベントが表示されますが、これはテキスト領域とは関係ありません。あなたが物事を扱うことができるいくつかの異なる方法があります。 1つは、「制御入力」パターンを実装し、テキスト領域の現在の値を状態（Redux状態またはコンポーネント状態のいずれか）に保つことです。別の方法は、テキスト領域に "ref"を保存し、ボタンがクリックされたときに実際のDOM要素から値を取得することです。

「制御された入力」のパターンとその使い方を説明するReact/Reduxリンクリストの一部として、React and Formsの記事へのリンクがあります。