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：

不要直接改变this.state，因为之后调用setState（）可能替换你所做的突变。把它当作状态对待不可变的。

如果您正确更新forceUpdate()值，则不需要

state，它会自动执行re-rendering，请检查：

＆＃13;

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'))

＆＃13;

<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'/>

＆＃13;

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 });
}

更新react中的数组索引值

3 个答案: