React 15 での valueLink の非推奨への対処
React バージョン 15 は非推奨になりました valueLink これは、フォーム要素の値とその要素を使用するコンポーネントの状態プロパティの間の双方向バインディングを表現するためのフォーム要素のプロパティでした。 推奨される置き換えは、明示的に指定することです。 value 小道具として、そして onChange 代わりにハンドラー。
Rescaleでは、 valueLink たくさん。 ビジネス オブジェクトを変更するコンポーネントを作成する場合、通常、ビジネス オブジェクトは不変です。 Record 不変ライブラリのインスタンス - ビジネス オブジェクトをコンポーネントに渡すパターンを使用します。 props次に、コンポーネントの状態プロパティを上記のオブジェクトに初期化します。 getInitialState。 説明のための疑似コードを次に示します。
// 不変のビジネス オブジェクト const company = new Company({ Budget: '1000', name: 'Cool Company', }); // 会社を変更するための UI // コンポーネント定義 const LinkedStateMixin = require('react-addons-linked-state-mixin'); const CompanySettings = React.createClass({ mixins: [ LinkedStateMixin, ], getInitialState() { company: this.props.company, showAdvancedOptions: false, }, handleNameChange(name) { this.setState({ company: this.state.company .set('名前', 名前); }); }, handleBudgetChange(予算) { this.setState({ 会社: this.state.company.set('予算', 予算); }); }, save() { // ロジックを保存 }, render() { return (
); }, });
このパターンの良い点は、ビジネス オブジェクトが不変であるため、会社がコンポーネントに渡されることです (this.props.company) は、このコンポーネント内の会社を変更する過程で変更されないことが保証されますが、によって参照される会社は変更されません。 state (this.state.company) 変更される場合があります handleNameChange 呼ばれます。 このパターンでは、コンポーネントの状態は、モデルを変更するための「ステージング」領域と考えることができます。 で参照されている会社を比較するなどのことができます。 state が紹介した会社と props 変更が加えられたかどうかを確認し、変更を簡単に元に戻したり、変更を破棄したりできます。
ただし、ご覧のとおり、フォームによって変更できるモデルのフィールドごとにハンドラーを作成するのは少し面倒です。 この例では、変更のためのハンドラーが必要でした。 name に変更します budget。 ただし、適切なオブジェクトを生成する関数を作成するのはそれほど難しいことではありません。 { requestChange, value } ペアにして、そのオブジェクトを valueLink。 まさにそういうことだ 反応アドオンリンク状態ミックスイン や 反応リンク不変 に使用されます。
ただし、React 15 では、 value や onChange valueLink。 使用に切り替える value これは大したことではありません。上の例のように書き出すだけです。 唯一の注意点は、チェックボックスには次のものを使用する必要があることです。 checked value.
ハンドラーを生成するファクトリーの作成 onChange これは、単純なコンポーネント状態 (単純な文字列またはブール値を持つ状態) と Immutable オブジェクトを参照する状態を組み合わせて使用するため、自分たちで実装することにしました。 を生成する工場がここにあります onChange ハンドラー (名前付き linkState、と混同しないでください this.linkState 反応アドオンリンク状態ミックスインによって与えられます):
function createHandler(component, key, path) { return e => { const el = e.target; const value = el.type === 'チェックボックス' ? el.checked : el.value; Component.setState({ [キー]: パス ?component.state[キー].setIn(パス, 値) : 値, }); }; module.exports = function linkState(component, key, path) { if (path) { return createHandler(component, key, path); const キャッシュ = コンポーネント.__linkStateHandlers || (component.__linkStateHandlers = {}); || キャッシュ[キー]を返す || (キャッシュ[キー] = createHandler(コンポーネント, キー)); };
これを使用して、 valueLink上の例では次のようになります。
const CompanySettings = React.createClass({ getInitialState() { company: this.props.company, showAdvancedOptions: false, }, save() { // 保存処理 }, render() { return (
); }, });
私たちの実装の優れている点は、将来廃止される可能性があるミックスインを使用する必要がなく、単純な状態を処理するハンドラーの作成と不変オブジェクトの詳細な変更に同じファクトリ関数を使用していることです。 これは、プロジェクト内のreact-addons-linked-state-mixinとreactlink-immutableの依存関係を削除できることを意味します。
