Redux-Formは、表示された値とカスタムコンポーネントで送信された値を分離します

Question

私はCurrencyBoxという名前のカスタムコンポーネントを持っていて、redux-formを使用してフォームの送信と検証を行い、 "123,345"、 "1.000" 000 "、" 9.000,123 "など。

今日、入力値（1.000.000,456）を（1000000,456）としてサーバーに送信する必要があります。 123.456,789が、送信された値が123456,789

これを処理するために、とにかくありでなければならないよう要するに

は、表示された値でなければなりません。

ノーマライザなどを確認しましたが、これらは私には解決策ではありません。私はちょうど表示された値と提出された値を分離したい。

よろしくお願いいたします。

Answer 1

はあなたがonChange、onFocusとあなたが必要とする他のコールバックのセットアップにいくつかのハンドラが必要になります、たとえば、TextFieldに、このコンポーネントは、マスクと実際の値を受け取る必要があり、入力コンポーネントのラッパーコンポーネントを作成する必要があります例えば：

const { string, func } = PropTypes; 

class TextField extends Component { 
    static propTypes = { 
    value: string, 
    onChange: func, 
    format: string, 
    }; 

    getFormat(value) { 
    // set the format that you need 
    // based on the format prop or any other option 
    return applyFormat(value); 
    } 

    handleChange = (event) => { 
    const value = event.target.value; 
    const { onChange } = this.props; 

    if (onChange) { 
     // Before returning the value 
     // you need to remove the format 
     onChange(removeFormat(value)); 
    } 
    } 

    render() { 
    const { value } = this.props; 

    return (
     <input 
     type="text" 
     value={this.getFormat(value)} 
     onChange={this.handleChange} 
     /> 
    ); 
    } 
} 

これはあなたが何ができるかの非常に単純な例であり、基本的にはフォーマットを設定し、onChangeにあなたはフォーマットを削除する必要がある値をレンダリングする前に、あなたはonBlurの代わりを実装することができonChange、あなたがreduxを使用している場合、この方法はあなたの減速機に送信されますユーザーが編集を完了するまで、キーストロークごとに減速器を呼び出すことを防ぎます。

使用法：

<TextField 
value={this.props.dataFromRedux} 
onChange={this.props.actionCreatorToSaveValueOnState} 
/> 

私はこれが役に立てば幸い！