反応ReduxフォームでSyncfusionの反応リッチテキストエディタを使用する方法

シンクロは反応するRich Text Editor コンポーネントはUIフォームコントロールをフレーム化するために使用できるWYSIWYGエディタコンポーネントです.これは、反応Reduxフォームでシームレスに動作し、フォームフィールドの入力を検証することができます.
このブログではリッチテキストエディタコンポーネントをReduxフォームフィールドにマージし、入力を検証する手順を説明します.このブログでは次のトピックを取り上げます

What is Redux Form?

Getting started with create-react-app

Configuring the Syncfusion React Rich Text Editor component

Create a redux store

Create an RteForm.js file

Integrate the Rich Text Editor form into a React component

Resources

どのようなreduxフォームですか？

Redux は、オープンソースのJavaScriptライブラリです.これは、反応と角度プラットフォームでUIコンポーネントを開発するために使用されます.redux -form 簡単に任意の反応Webアプリケーションに統合することができます検証ライブラリです.これは、フィールドの入力値と高次のコンポーネントを格納するReduxライブラリを使用します.
参照redux-form 詳細ページを取得するドキュメントページ.
今、どのようにReduxと反応アプリを作成し、その中に我々の反応リッチテキストエディタを統合を参照してみましょう.

アプリケーションを作成する反応

反応アプリケーションを作成するには、次の手順に従います.
ステップ1:使用するcreate-react-app NuGetパッケージをグローバルにインストールし、基本的な反応アプリケーションを作成するコマンドをインストールします.npm i create-react-app -gあなたはcreate the app を使用して任意のディレクトリでは、アプリケーションのコマンドを作成反応します.
Step 2 :アプリケーションを作成したいディレクトリに移動し、次のコマンドを実行します.ここでは、私はこのアプリRichTextEditor Reduxフォームの命名です.create-react-app RichTextEditor-Redux-Formしたがって、我々はアプリケーションを作成している.
手順3 :既定の設定でアプリケーションを実行するには、アプリケーションのディレクトリに移動し、次のコマンドを使用します.cd RichTextEditor-Redux-Form
npm start

これにより、我々はベースアプリケーションを作成し、それを実行している.

リッチテキストエディタコンポーネント

次のコマンドを実行して、SyncFusion対応リッチテキストエディタを使用して反応アプリケーションを構成するために必要なNuGetパッケージをインストールします.npm install ej2-react-richtexteditor次のコマンドはreduxフォームと一緒にReduxとその依存パッケージをインストールし、カスタム反応コンポーネントで入力を検証します.npm i --save-dev redux react-redux redux-formさて、必要な設定を完了しました.

Reduxストアを作る

CombinerInducdersでストアを作成し、インデックスのプロバイダーコンポーネントを通過します.jsファイル.次のコード例を参照してください.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';
import App from './App';

const rootReducer = combineReducers({
    form: formReducer
});

const store = createStore(rootReducer);

ReactDOM.render(
<Provider store={store}>
 <App />
</Provider>
,document.getElementById('root'));

RteFormを作成します。jsファイル

Reduxストアを作成した後、RteFormを作成します.srcディレクトリ内のJSファイルで、リッチテキストエディターコンポーネントをフィールド入力内にマージし、Reduxストアと通信してReduxFormと渡します.
RTeFormは、送信プロセスを処理し、妥当性検査メッセージをラベルに表示するReduxフォームの状態と機能を提供します.
リッチテキストエディターコンポーネントをReduxフォーム内で検証するには、リッチテキストエディターのイベントに次のフィールド入力イベントハンドラをマップします.

次のコードを参照してください.

//RteForm.js 
import React from ‘react’;
import { Field, reduxForm } from ‘redux-form’;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from ‘@syncfusion/ej2-react-richtexteditor’;

const validate = values => {
  const errors = {}
  if (values.comment && values.comment.length < 20) {
    errors.comment = ‘Minimum be 20 characters or more’;
  } else if (!values.comment) {
    errors.comment = ‘Required’;
  } else {
    errors.comment = false;
  }
  return errors
}

const renderRTEField = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <label className=”control-label”>{label}</label>
    <div>
      <RichTextEditorComponent htmlAttributes={{ name: “comment” }} value={input.value}
        change={param => input.onChange(param.value)} focus={param => input.onFocus()} blur={param => input.onBlur()} id=”defaultRTE”>
        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
      </RichTextEditorComponent>
      {touched && ((error && <span className=”text-danger”>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)

let RteForm = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div className=”form-group”>
        <Field name=”comment” component={renderRTEField} label=”Comment” />
      </div>
      <div className=”form-group”>
        <button type=”submit” disabled={pristine || submitting} className=”btn btn-primary”>Submit</button>
      </div>
    </form>
  )
}
RteForm = reduxForm({
  form: ‘contact’,
  validate,
})(RteForm);

export default RteForm;

現在rteform.JSファイルはReduxフォームフィールドに対応するWebフォームコンポーネントとして機能します.このフォームフィールドでの妥当性検査はリッチテキストエディターコンポーネントで行います.

リッチテキストエディタフォームを

リッチテキストエディターフォームを反応コンポーネントに統合するには、次のコードを参照してください.

import React from 'react';
import RteForm from './RteForm';

class App extends React.Component {
  submit = (values) => {
    alert("Form values submitted");
    console.log(values);
  }
  render() {
    return (
      <div className="container">
        <h3>Redux Form Validation with RichTextEditor</h3>
        <RteForm onSubmit={this.submit} />
      </div>

    )
  }
}

export default App;

さて、リッチテキストエディタコンポーネントは、Reduxフォームで妥当性検査を行う準備ができています.アプリケーションを実行し、ブラウザに切り替えてフォーム内のリッチテキストエディターコンポーネントを確認します.
アプリケーションで、フォームフィールドに値を入力し、[送信]ボタンをクリックします.値はリッチテキストエディターで検証され、入力された値が20文字未満の場合に妥当性検査メッセージが表示されます.

資源

あなたは、これから完全なプロジェクトをチェックアウトすることができますGitHub リポジトリ.

結論

私はあなたが今どのように追加する方法の明確なアイデアを持って願っていますSyncfusion React Rich Text Editor 検証用のReduxフォーム内のコンポーネント.私たちはあなたにこの統合を試みて、あなたが下記のコメントセクションでフィードバックを提供することを望みます.
あなたがSyncFusionに新しい場合は、ダウンロードして我々のコントロールの機能を試してくださいfree trial . また、私たちを探索することができますonline demo アンドdocumentation .
あなたは私たちを介して私達に連絡することができますsupport forums , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!