反応の配列インデックス値を更新する

Question

私は反応が非常に新しいですし、チェックボックスを作成しようとしており、また、選択したチェックボックスの名前リストをテキストボックスに表示しようとしています。選択されたボックスの値を保存するために選択された[]を使用していて、[]をチェックしてそのボックスがチェックされているかどうかをチェックしています。

コードは正常に動作しますが、私はforceupdate（）の使用を避け、setState（）を使用します。私が使用すると、それを使って選択した[]値を更新できません。誰かがsetstateを使って特定の配列インデックス値を更新する方法を教えてくれますので、自身がレンダリングされ、forceupdate（）を使う必要はありませんか？

ありがとうございました。

var history = React.createClass({ 

getInitialState : function(){ 
    return { 
     checked : [], 
     selected: [] 
    }; 
}, 

componentWillMount : function(){ 

}, 

handleChangechk: function (e){ 

    const target = e.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    if(value===true) 
    { 
     this.state.checked[name]= true; 
     this.state.selected[name] = name; 
     this.forceUpdate(); 

    } 
    else 
    { 
     this.state.checked[name]= false; 
     this.state.selected[name] = ''; 
     this.forceUpdate(); 
    } 
}, 

render : function() { 

    var historyList = []; 
    var selectedList = []; 

    for (var i = 0; i < 10; i++) { 
     historyList.push(<span key={i}><input type="checkbox" name = {i} checked={!!this.state.checked[i]} onChange ={(e)=> this.handleChangechk(e)}/><span ></span><label >checkbox {i}</label></span>); 
     if(this.state.selected[i]) 
     { 
      selectedList.push(this.state.selected[i]); 
     } 
    }; 


return( /* display selected checkbox (selectedList); */}}); 

Answer 1

常に、this.state.a.push()またはthis.state.a = ''によって直接状態変数を変異させることはありませんsetStateを使用して値を更新してください。 Docから

：

SETSTATEを（呼び出して、直接this.stateを変異ことはありません）、その後 あなたが作った突然変異を交換することができます。それが 不変であるかのようにthis.stateを扱います。

forceUpdate()は、あなたが適切state値を更新した場合、それは自動的にre-renderingを行います必要はありません。このチェック：SETSTATEで問題がある

class App extends React.Component{ 
 

 
    constructor(){ 
 
    super(); 
 
    this.state = {value: [], selected: []} 
 
    } 
 
    
 
    change(event) { 
 
    let target, value, selected; 
 

 
    target = event.target; 
 
    value = this.state.value.slice(); 
 
    selected = this.state.selected.slice(); 
 

 
    value[target.name] = target.checked; 
 

 
    if(target.checked){ 
 
     selected.push(target.name); 
 
    }else{ 
 
     let index = selected.indexOf(target.name); 
 
     selected.splice(index, 1); 
 
    } 
 

 
    this.setState({ 
 
     value, selected 
 
    }); 
 
    } 
 

 
    render(){ 
 
    
 
    return( 
 
     <div> 
 
      {[1,2,3,4,5].map((el,i)=>{ 
 
      return <div key={i}> 
 
       <input checked={this.state.value[i]} type='checkbox' onChange={this.change.bind(this)} name={i}/> 
 
       Item- {el} 
 
      </div> 
 
      })} 
 

 
      Selected Values: {JSON.stringify(this.state.selected)} 
 

 
     </div> 
 
     
 
    ) 
 
    } 
 
} 
 

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

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

 
<div id='app'/>

Answer 2

あなたはあなたの状態とほぼ決して割り当て値は、直接および/またはforceUpdateを使用する必要があります。

this.state.checked[name]= true; 
    this.state.selected[name] = name; 
    this.forceUpdate(); 

forceUpdateの使用を回避するには、値を割り当てることがSETSTATEを使用するのと同じくらい簡単です。 setStateは自動的に再レン​​ダリングをトリガーします。

var newChecked = this.state.checked.slice(); 
newChecked[name] = true; 
var newSelected = this.state.selected.slice(); 
newSelected [name] = name; 
this.setState({ 
    checked: newChecked, 
    selected: newSelected, 
}); 

Answer 3

あなたは、チェックされ、選択された配列のコピーを入手し、関連するインデックスを変更して、状態を更新できます。

handleChangechk: function (e) { 
    const target = e.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    let checked = this.state.checked.slice(),  
     selected = this.state.selected.slice(); 

    if(value === true) { 
     checked[name]= true; 
     selected[name] = name; 
    } else { 
     checked[name]= false; 
     selected[name] = ''; 
    } 

    this.setState({ items, selected }); 
}