تحديث حالة ReactJS العميقة

Question

لدي مجموعة من العناصر في حالة مكون ReactJS التي أقوم بتكرارها لإنشاء نموذج.سؤالي هو:كيف أقوم بتحديث هذه العناصر بشكل أفضل عندما تتغير الحقول؟

على سبيل المثال:

var items = this.state.foo.bar.items.map(function(item, i) {
    return <input value={item.baz} onChange={??}
});

كيف سيبدو معالج onChange الخاص بي في هذه الحالة؟هل أقوم بتغيير item.baz الملكية مباشرة، ثم this.setState(state)؟يبدو خطأ.أنا أنظر إلى رد فعل المساعدين ثبات, ، ولكن انظر كيفية العمل مع فهارس المصفوفة.

شكرًا.

Answer 1

يمكنك استخدام الفهرس لتحديث عنصر الصفيف الصحيح عن طريق تمريره إليه onChange عبر bind ومن ثم إنشاء الكائن ديناميكيًا لتمريره إليه update:

var Hello = React.createClass({
    getInitialState : function() {
      return  {
        foo : {
          bar : {
            items : [ { baz : 1 }, { baz : 2 }, { baz : 3 } ]
          }
        }
      };
    },
    onChange : function( idx, item, event ) {
      var objForUpdate = { foo: { bar: { items : {} } } };
      objForUpdate.foo.bar.items[ idx ] = { $set : { baz : event.target.value } };
      var newData = React.addons.update( this.state, objForUpdate );
      this.setState( newData );
    },
    render: function() {
      var _this = this;
      var items = this.state.foo.bar.items.map(function(item, i) {
        return <input value={item.baz} onChange={_this.onChange.bind( _this, i, item )}></input>
      });
      return <div>{items}</div>;
    }
});

أفهم أن هذا له ميزة فقط على شيء من هذا القبيل

onChange : function( idx, item, event ) {
  item.baz = event.target.value;
  this.setState( this.state );
}

إذا كنت تنوي تجاوز shouldComponentUpdate وكن أكثر انتقائية بشأن وقت إعادة العرض أكثر من كل مرة this.setState() يسمى.

com.jsfiddle

Answer 2

اعتقدت أنني سأطرح هذه المكتبة لأنها مصممة خصيصًا لحالة التفاعل المتداخلة بشدة،

https://github.com/mquan/cortex

يمكنك تحديث العناصر داخل كل مكون وسيتدفق ذلك تلقائيًا دون الحاجة إلى تحديد عمليات الاسترجاعات لتمرير الحدث.