2

次のコードがあります

componentDidMount() {
    super.componentDidMount();
    let jobj = $(ReactDOM.findDOMNode(this));
    $.validator.unobtrusive.parse(jobj);
}

これを実行した後、エラーが発生します: Uncaught TypeError: Cannot read property 'unobtrusive' of undefined

ASP MVC のインポートを目立たなくし、jquery を検証するにはどうすればよいですか?

4

1 に答える 1

3

エラーから見ると $.validator はまだ付いていないようです。

React コンポーネントをレンダリングする前に、jquery.validate.min.js を見逃していないかどうかを確認してください (こちらを参照)。

ASP.NET MVC と目立たない使用について、これは私が過去数日間調査してきた質問でもあります。これに関する私の最初の考えをいくつか共有させてください。

バリデーションは React ですぐに使用できます

目立たない検証がどのように機能するかから判断すると、JSX または TSX (Typescript v1.6+) を強化するか、スクリプトを data-val-* 属性で反応させる限り、目立たないプラグインはすでに魔法を実行します。

var TextInputComponent = React.createClass({
    render() {        
    return (
        <div>
            <input data-val="true" data-val-required="error msg" name="Test" type="text" />
            <span className="text-danger"  data-valmsg-replace="true" data-valmsg-for="Test"></span>
        </div>
    );
}
});

問題空間

問題は、私たち (ASP.NET MVC 開発者) が、Razor に @Html.TextFor(...) メソッド (および他の入力タイプのバリアント) を介してすべての属性を生成させることに慣れていることです。次に、これらの属性を ReactJS コンポーネントに渡して、特定のフィールドがどのように検証されるかを認識できるようにする必要があります。

以下が機能するかどうかをテストする予定です。

  1. HtmlHelper の GetUnobtrusiveValidationAttributes メソッドを使用して、ViewModel メタデータに関連するすべての属性を取得します。この拡張メソッドのようなもの:

    public static IDictionary<string, object> UnobtrusiveValidationAttributesFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> propertyExpression)
{
    var propertyName = html.NameFor(propertyExpression).ToString();
    var metadata = ModelMetadata.FromLambdaExpression(propertyExpression, html.ViewData);
    var attributes = html.GetUnobtrusiveValidationAttributes(propertyName, metadata);
    return attributes;
}

  2. このメソッドを JSON または Javascript オブジェクトに出力し、Javascript 変数に割り当てます (グローバルまたは ReactDOM.render メソッドのスコープ)。

  3. JSX スプレッド機能を使用して、(2) の変数を props として含めます。（こちらをご覧ください）

つまり、ASP.NET 検証を備えた完全なフォームを作成するには、ReactJS コンポーネントに必要なすべての data-val-* 情報を伝える必要があります。

于 2015-12-31T04:57:42.390 に答える