Kullanıcının kendi formunu tasarlayabileceği bir uygulama oluşturuyorum. Örneğin, alanın adını ve hangi sütunların dahil edilmesi gerektiğini belirtin.

Bileşen burada JSFiddle olarak kullanılabilir .

İlk durumum şöyle:

var DynamicForm = React.createClass({
  getInitialState: function() {
   var items = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'customer_name',
                autocomplete_from: 'customer_name', title: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'user_name', 
                    autocomplete_from: 'user_name', title: '' };

     return { items };
   },

  render: function() {
     var _this = this;
     return (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           return (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key} 
                   populate_at={data.populate_at} />
            </div>
            );
        }, this)}
        <button onClick={this.newFieldEntry}>Create a new field</button>
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    );
  }

Kullanıcı değerlerden herhangi birini değiştirdiğinde durumu güncellemek istiyorum, ancak doğru nesneyi hedeflemek için zor zamanlar yaşıyorum:

var PopulateAtCheckboxes = React.createClass({
  handleChange: function (e) {
     item = this.state.items[1];
     item.name = 'newName';
     items[1] = item;
     this.setState({items: items});
  },
  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      return (
        <label for={value}>
          <input type="radio" name={'populate_at'+this.props.id} value={value}
            onChange={this.handleChange} checked={this.props.checked == value}
            ref="populate-at"/>
          {value}
        </label>
      );
    }, this);
    return (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

this.setStateGüncellemesini sağlamak için nasıl zanaat yapmalıyım items[1].name?

Bu iş parçacığında çok fazla yanlış bilgi olduğundan, yardımcı kütüphaneler olmadan nasıl yapabileceğiniz aşağıda açıklanmıştır:

handleChange: function (e) {
    // 1. Make a shallow copy of the items
    let items = [...this.state.items];
    // 2. Make a shallow copy of the item you want to mutate
    let item = {...items[1]};
    // 3. Replace the property you're intested in
    item.name = 'newName';
    // 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
    items[1] = item;
    // 5. Set the state to our new copy
    this.setState({items});
},

İsterseniz 2. ve 3. adımları birleştirebilirsiniz:

let item = {
    ...items[1],
    name: 'newName'
}

Veya her şeyi tek bir satırda yapabilirsiniz:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

Not: itemsBir dizi yaptım . OP bir nesne kullandı. Ancak, kavramlar aynıdır.

Terminalinizde / konsolunuzda neler olduğunu görebilirsiniz:

❯ node
> items = [{name:'foo'},{name:'bar'},{name:'baz'}]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> clone = [...items]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> item1 = {...clone[1]}
{ name: 'bar' }
> item1.name = 'bacon'
'bacon'
> clone[1] = item1
{ name: 'bacon' }
> clone
[ { name: 'foo' }, { name: 'bacon' }, { name: 'baz' } ]
> items
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] // good! we didn't mutate `items`
> items === clone
false // these are different objects
> items[0] === clone[0]
true // we don't need to clone items 0 and 2 because we're not mutating them (efficiency gains!)
> items[1] === clone[1]
false // this guy we copied

Bunun için updatedeğişmezlik yardımcısını kullanabilirsiniz :

this.setState({
  items: update(this.state.items, {1: {name: {$set: 'updated field name'}}})
})

Ya da shouldComponentUpdate()kullanarak bir yaşam döngüsü yönteminde ===bu öğedeki değişiklikleri tespit etmeyi umursamıyorsanız , durumu doğrudan düzenleyebilir ve bileşeni yeniden oluşturmaya zorlayabilirsiniz - bu, @limelights'ın yanıtıyla aynıdır. bir nesneyi durumdan çıkarma ve düzenleme.

this.state.items[1].name = 'updated field name'
this.forceUpdate()

Düzenleme sonrası ekleme:

Check out Basit Bileşen İletişim dan ders tepki-eğitim bir durum değişikliği tetiklemek için gereken bir çocuk bileşenine bir devlet tutan ebeveynden bir geri çağırma işlevi nasıl geçirileceği bir örnek için.

Yanlış yol!

handleChange = (e) => {
    const { items } = this.state;
    items[1].name = e.target.value;

    // update state
    this.setState({
        items,
    });
};

Yorumlarda çok daha iyi geliştiricilerin işaret ettiği gibi: devleti mutasyona uğratmak yanlıştır!

Bunu çözmem için biraz zamanımı aldı. Yukarıda çalışır ama Tepki'nin gücünü alır. Örneğin componentDidUpdate, doğrudan değiştirildiği için bunu bir güncelleme olarak görmez.

Yani doğru yol :

handleChange = (e) => {
    this.setState(prevState => ({
        items: {
            ...prevState.items,
            [prevState.items[1].name]: e.target.value,
        },
    }));
};

Vanilya JavaScript'in: tipik olarak üç yöntem kullanılır durumuna, tepki derin iç içe nesneler / değişkenleri değiştirmek için Object.assign, değişmezlik-yardımcı ve cloneDeepgelen Lodash .

Bunu başarmak için daha az popüler üçüncü taraf kütüphaneleri de var, ancak bu cevapta sadece bu üç seçeneği ele alacağım. Ayrıca, dizi yayma gibi bazı ek vanilya JavaScript yöntemleri de mevcuttur (örneğin @ mpen'in cevabına bakın), ancak çok sezgisel değil, kullanımı kolay ve tüm durum manipülasyon durumlarını idare edebilir.

As üst sivri sayısız kez yazarlar devletin doğrudan mutasyon teklif cevapları, açıklama olarak vardı: sadece bunu yapmaz . Bu, kaçınılmaz olarak istenmeyen sonuçlara yol açacak olan her yerde bulunan bir Tepki anti-paternidir. Doğru yolu öğrenin.

Yaygın olarak kullanılan üç yöntemi karşılaştıralım.

Bu durum nesne yapısı göz önüne alındığında:

state = {
    outer: {
        inner: 'initial value'
    }
}

innerEyaletin geri kalanını etkilemeden en içteki alanın değerini güncellemek için aşağıdaki yöntemleri kullanabilirsiniz .

1. Vanilya JavaScript'in Object.assign

const App = () => {
  const [outer, setOuter] = React.useState({ inner: 'initial value' })

  React.useEffect(() => {
    console.log('Before the shallow copying:', outer.inner) // initial value
    const newOuter = Object.assign({}, outer, { inner: 'updated value' })
    console.log('After the shallow copy is taken, the value in the state is still:', outer.inner) // initial value
    setOuter(newOuter)
  }, [])

  console.log('In render:', outer.inner)

  return (
    <section>Inner property: <i>{outer.inner}</i></section>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

<main id="react"></main>

O, unutmayın Object.assign derin klonlama gerçekleştirmez , çünkü sadece kopyalar gayrimenkul değerleri ve en o yüzden ona bir denir ne kopyalayarak sığ (yorumlar).

Bunun çalışması için sadece ilkel tiplerin ( outer.inner), yani dizelerin, sayıların, booleanların özelliklerini manipüle etmeliyiz .

Bu örnekte, yeni bir sabit (oluştururken const newOuter...kullanarak) Object.assign(boş bir nesne oluşturur ki, {}), kopyalar outer(nesne { inner: 'initial value' }içine) ve daha sonra kopya farklı bir nesne { inner: 'updated value' } üzerinde o.

Bu şekilde, yeni oluşturulan newOutersabit { inner: 'updated value' }, innermülkün geçersiz kılınmasından bu yana bir değer tutacaktır . Bu newOuter, durumdaki nesneyle bağlantılı olmayan yepyeni bir nesnedir, bu nedenle gerektiğinde mutasyona uğrayabilir ve durum, güncelleme komutu verilinceye kadar aynı kalır ve değişmez.

Son bölüm, durumdaki setOuter()orijinali outeryeni oluşturulan bir newOuternesneyle değiştirmek için ayarlayıcıyı kullanmaktır (yalnızca değer değişecektir, özellik adı değişmeyecektir outer).

Şimdi daha derin bir durumumuz olduğunu hayal edin state = { outer: { inner: { innerMost: 'initial value' } } }. newOuterNesneyi oluşturmaya ve durumun outeriçeriğiyle doldurmaya Object.assignçalışabiliriz , ancak çok derin iç içe olduğundan , innerMostdeğerini bu yeni oluşturulan newOuternesneye kopyalayamayacağız innerMost.

Hala kopya olabilir inneryukarıdaki örnekte olduğu gibi, ama şimdi bir nesne ve beri değil ilkel, referans gelen newOuter.innerkopyalanır outer.inneryerel ile sona erecek bunun yerine, hangi vasıta newOuterdoğrudan devlet nesneye bağlı nesne .

Bu, yerel olarak oluşturulan mutasyonların nesneyi (devlette) newOuter.innerdoğrudan etkileyeceği anlamına gelir outer.inner, çünkü bunlar aslında aynı şey haline gelmiştir (bilgisayar belleğinde).

Object.assign bu nedenle sadece ilkel tipte değerler tutan en içteki üyelere sahip nispeten basit bir seviye derin durum yapınız varsa işe yarayacaktır.

Güncellemeniz gereken daha derin nesneleriniz (2. seviye veya daha fazla) varsa kullanmayın Object.assign. Durumu doğrudan mutasyona uğratma riskiniz vardır.

2. Lodash'ın klonu

const App = () => {
  const [outer, setOuter] = React.useState({ inner: 'initial value' })

  React.useEffect(() => {
    console.log('Before the deep cloning:', outer.inner) // initial value
    const newOuter = _.cloneDeep(outer) // cloneDeep() is coming from the Lodash lib
    newOuter.inner = 'updated value'
    console.log('After the deeply cloned object is modified, the value in the state is still:', outer.inner) // initial value
    setOuter(newOuter)
  }, [])

  console.log('In render:', outer.inner)

  return (
    <section>Inner property: <i>{outer.inner}</i></section>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

<main id="react"></main>

Lodash'ın cloneDeep'inin kullanımı çok daha kolaydır. Derin bir klonlama yapar , bu nedenle içeride çok seviyeli nesneler veya dizilerle oldukça karmaşık bir duruma sahipseniz, sağlam bir seçenektir. Sadece cloneDeep()üst düzey durum özelliği, klonlanan parçayı istediğiniz şekilde değiştirin ve setOuter()tekrar duruma getirin.

3. değişmezlik yardımcısı

const App = () => {
  const [outer, setOuter] = React.useState({ inner: 'initial value' })
  
  React.useEffect(() => {
    const update = immutabilityHelper
    console.log('Before the deep cloning and updating:', outer.inner) // initial value
    const newOuter = update(outer, { inner: { $set: 'updated value' } })
    console.log('After the cloning and updating, the value in the state is still:', outer.inner) // initial value
    setOuter(newOuter)
  }, [])

  console.log('In render:', outer.inner)

  return (
    <section>Inner property: <i>{outer.inner}</i></section>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
<script src="https://wzrd.in/standalone/immutability-helper@3.0.0"></script>

<main id="react"></main>

immutability-helperyepyeni bir seviyeye alır ve bu konuda serin şey olabilir sadece olmasıdır $setdevlet öğelere değerleri, aynı zamanda $push, $splice, $merge(vs) onları. İşte mevcut komutların bir listesi .

Yan notlar

Yine, derinden iç içe geçmiş ( ) değil, durum nesnesinin ( bu örneklerde) setOuteryalnızca birinci düzey özelliklerini değiştirdiğini unutmayın . Farklı bir şekilde davransaydı, bu soru olmazdı.outerouter.inner

Hangisi projeniz için doğru ?

Harici bağımlılıklar istemiyorsanız veya kullanamıyorsanız ve basit bir durum yapısına sahipseniz , sadık kalın Object.assign.

Büyük ve / veya karmaşık bir durumu manipüle ederseniz , Lodash's cloneDeepakıllıca bir seçimdir.

Gelişmiş yeteneklere ihtiyacınız varsa , yani devlet yapınız karmaşıksa ve üzerinde her türlü işlemi yapmanız gerekiyorsa, immutability-helperdurum manipülasyonu için kullanılabilen çok gelişmiş bir araçtır.

... yoksa bunu gerçekten yapmak zorunda mısın ?

React'ın durumunda karmaşık bir veri tutarsanız, belki de bu veriyi ele almanın diğer yollarını düşünmek için iyi bir zamandır. React bileşenlerinde karmaşık bir durum nesnesini doğru ayarlamak basit bir işlem değildir ve farklı yaklaşımları düşünmenizi şiddetle tavsiye ederim.

Büyük olasılıkla karmaşık verilerinizi bir Redux mağazasında tutmanız, redüktörler ve / veya sagalar kullanarak orada ayarlamanız ve seçiciler kullanarak erişmeniz daha iyi olur.

Ben de aynı problemi yaşadım. İşte işe yarayan basit bir çözüm!

const newItems = [...this.state.items];
newItems[item] = value;
this.setState({ items:newItems });

SetState üzerindeki React belgelerine göre , Object.assignburada diğer cevapların önerdiği şekilde kullanmak ideal değildir. setStateEşzamansız davranışının doğası gereği, bu tekniği kullanan sonraki çağrılar, önceki çağrıları geçersiz kılarak istenmeyen sonuçlara neden olabilir.

Bunun yerine, React dokümanları setState, önceki durumda çalışan güncelleyici formunun kullanılmasını önerir . Bir dizi veya nesneyi güncellerken yeni bir dizi veya nesne döndürmeniz gerektiğini unutmayın, çünkü React durum değişmezliğini korumamızı gerektirir. Bir diziyi sığ kopyalamak için ES6 sözdiziminin yayma işlecini kullanmak, dizinin belirli bir dizininde bir nesnenin bir özelliğini oluşturmak veya güncelleştirmek şöyle görünür:

this.setState(prevState => {
    const newItems = [...prevState.items];
    newItems[index].name = newName;
    return {items: newItems};
})

Önce istediğiniz öğeyi alın, o nesnede ne istediğinizi değiştirin ve tekrar durumuna getirin. Durumu yalnızca bir nesneyi geçirerek getInitialStatekullanma şekliniz, anahtarlı bir nesne kullanırsanız çok daha kolay olurdu.

handleChange: function (e) {
   item = this.state.items[1];
   item.name = 'newName';
   items[1] = item;

   this.setState({items: items});
}

Durumu yerinde değiştirmeyin. Beklenmedik sonuçlara neden olabilir. Dersimi öğrendim! Her zaman bir kopya / klon ile çalışın, iyi bir kopyadır Object.assign():

item = Object.assign({}, this.state.items[1], {name: 'newName'});
items[1] = item;
this.setState({items: items});

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Gerçekten çok basit.

İlk olarak tüm nesne nesnesini durumdan çekin, items nesnesinin bir kısmını istediğiniz gibi güncelleyin ve tüm nesne nesnesini setState aracılığıyla tekrar durumuna getirin.

handleChange: function (e) {
  items = Object.assign(this.state.items); // Pull the entire items object out. Using object.assign is a good idea for objects.
  items[1].name = 'newName'; // update the items object as needed
  this.setState({ items }); // Put back in state
}

Yukarıdaki seçeneklerin hiçbiri benim için ideal olmadığından haritayı kullandım:

this.setState({items: this.state.items.map((item,idx)=> idx!==1 ?item :{...item,name:'new_name'}) })

Mutasyon içermez:

// given a state
state = {items: [{name: 'Fred', value: 1}, {name: 'Wilma', value: 2}]}

// This will work without mutation as it clones the modified item in the map:
this.state.items
   .map(item => item.name === 'Fred' ? {...item, ...{value: 3}} : item)

this.setState(newItems)

Bunu şaşırtıcı derecede zor buldum ve ES6 yayılma büyüsünün hiçbiri beklendiği gibi çalışmadı. Düzenleme amacıyla işlenen öğe özelliklerini almak için böyle bir yapı kullanıyordum.

kullanarak bulundu updateimmutability-helperbu basitleştirilmiş örnekte en basit olanı yöntemi :

constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

uyarlandığı gibi https://github.com/kolodny/immutability-helper#computed-property-names adresinden

güncellenecek dizi üyesi daha iç içe bir karmaşık nesnedir derinlemesine uygun derin kopyalama yöntemini kullanın dayalı .

Düzen parametrelerini işlemenin kesinlikle daha iyi yolları vardır, ancak bu dizilerin nasıl ele alınacağıyla ilgilidir. Her bir alt öğe için ilgili değerler de bunların dışında hesaplanabilir, ancak containerState'i aşağı aktarmayı daha uygun buldum, böylece childs istedikleri özellikleri getirebilir ve verilen dizinde üst durum dizisini güncelleyebilirler.

import React from 'react'
import update from 'immutability-helper'
import { ContainerElement } from './container.component.style.js'
import ChildComponent from './child-component'
export default class ContainerComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

  updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

  // ...

  render() {
    let index = 0
    return (
      <ContainerElement>
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      </ContainerElement>
    )
  }
}

Tek satırda ok işlevli dizi eşlemesi kullanma

this.setState({
    items: this.state.items.map((item, index) =>
      index === 1 ? { ...item, name: 'newName' } : item,
   )
})

handleChangeDeğişen öğeyi bulmak ve güncellemek için olayı kullanın . Bunun için onu tanımlamak ve güncellemek için bazı özellikleri değiştirmeniz gerekebilir.

Bkz. Keman https://jsfiddle.net/69z2wepo/6164/

İşlev tutamacı değişikliğini hareket ettirir ve bir dizin parametresi eklerdim

handleChange: function (index) {
    var items = this.state.items;
    items[index].name = 'newName';
    this.setState({items: items});
},

Dinamik form bileşenine gidin ve PopulateAtCheckboxes bileşenine prop olarak iletin. Öğelerinizin üzerinden geçerken, aşağıda gösterildiği gibi tutamaç değişikliğine iletilecek ek bir sayaç (aşağıdaki kodda dizin olarak adlandırılır) ekleyebilirsiniz

{ Object.keys(this.state.items).map(function (key, index) {
var item = _this.state.items[key];
var boundHandleChange = _this.handleChange.bind(_this, index);
  return (
    <div>
        <PopulateAtCheckboxes this={this}
            checked={item.populate_at} id={key} 
            handleChange={boundHandleChange}
            populate_at={data.populate_at} />
    </div>
);
}, this)}

Son olarak değişiklik dinleyicinizi aşağıda gösterildiği gibi arayabilirsiniz

<input type="radio" name={'populate_at'+this.props.id} value={value} onChange={this.props.handleChange} checked={this.props.checked == value} ref="populate-at"/>

Öğesinin yalnızca bir bölümünü değiştirmeniz gerekiyorsa Array, durumu olarak ayarlanmış bir tepki bileşeniniz var.

state = {items: [{name: 'red-one', value: 100}, {name: 'green-one', value: 999}]}

Bu güncellemek için en iyisi red-onede Arrayşöyle:

const itemIndex = this.state.items.findIndex(i=> i.name === 'red-one');
const newItems = [
   this.state.items.slice(0, itemIndex),
   {name: 'red-one', value: 666},
   this.state.items.slice(itemIndex)
]

this.setState(newItems)

veya dinamik olarak oluşturulmuş bir listeniz varsa ve dizini bilmiyorsanız, yalnızca anahtarınız veya kimliğiniz varsa:

let ItemsCopy = []
let x = this.state.Items.map((entry) =>{

    if(entry.id == 'theIDYoureLookingFor')
    {
        entry.PropertyToChange = 'NewProperty'
    }

    ItemsCopy.push(entry)
})


this.setState({Items:ItemsCopy});

Kodu deneyin:

this.state.items[1] = 'new value';
var cloneObj = Object.assign({}, this.state.items);

this.setState({items: cloneObj });

Aşağıdaki kod parçası donuk beynimde kolay gitti. Nesneyi kaldırma ve güncellenen nesneyle değiştirme

    var udpateditem = this.state.items.find(function(item) { 
                   return item.name == "field_1" });
    udpateditem.name= "New updated name"                       
    this.setState(prevState => ({                                   
    items:prevState.dl_name_template.filter(function(item) { 
                                    return item.name !== "field_1"}).concat(udpateditem)
    }));

Başka bir bileşen oluşturmaya (diziye girmesi gereken nesne için) ve aşağıdakileri sahne olarak geçirmeye ne dersiniz?

1. bileşen dizini - dizinde dizi oluşturmak / güncellemek için dizin kullanılır.
2. set function - Bu işlev, verileri bileşen dizinine göre diziye koyar.

<SubObjectForm setData={this.setSubObjectData}                                                            objectIndex={index}/>

Burada {index}, bu SubObjectForm öğesinin kullanıldığı konuma göre iletilebilir.

ve setSubObjectData böyle bir şey olabilir.

 setSubObjectData: function(index, data){
      var arrayFromParentObject= <retrieve from props or state>;
      var objectInArray= arrayFromParentObject.array[index];
      arrayFromParentObject.array[index] = Object.assign(objectInArray, data);
 }

SubObjectForm'da, bu.props.setData veri değişikliğinde aşağıda verildiği gibi çağrılabilir.

<input type="text" name="name" onChange={(e) => this.props.setData(this.props.objectIndex,{name: e.target.value})}/>

this.setState({
      items: this.state.items.map((item,index) => {
        if (index === 1) {
          item.name = 'newName';
        }
        return item;
      })
    });

@ JonnyBuchanan'ın cevabı mükemmel çalışıyor, ancak sadece dizi durumu değişkeni için. Durum değişkeninin tek bir sözlük olması durumunda, bunu izleyin:

inputChange = input => e => {
    this.setState({
        item: update(this.state.item, {[input]: {$set: e.target.value}})
    })
}

Sen değiştirebilirsiniz [input]senin sözlüğün alan adıyla ve e.target.valuedeğeri ile. Bu kod, formumun giriş değişikliği olayında güncelleme işini gerçekleştirir.

Bunu deneyin kesinlikle işe yarayacak, diğer durumda denedim ama işe yaramadı

import _ from 'lodash';

this.state.var_name  = _.assign(this.state.var_name, {
   obj_prop: 'changed_value',
});

 handleChanges = (value, key) => {
     // clone the current State object
    let cloneObject = _.extend({}, this.state.currentAttribute);
    // key as user.name and value= "ABC" then current attributes have current properties as we changes
    currentAttribute[key] = value;
    // then set the state "currentAttribute" is key and "cloneObject" is changed object.  
    this.setState({currentAttribute: cloneObject});

ve Metin kutusundan değiştir add onChange olayı

onChange = {
   (event) => {                                                
      this.handleChanges(event.target.value, "title");
   }
}