Question

我有4个按钮，它们会更新状态“模式”：

<tr><button value = {0} name="mode" onClick={this.handleChange}>Montrer toutes les chambres</button></tr>
<tr><button value = {1} name="mode" onClick={this.handleChange}>Montrer les chambres vides</button></tr>
<tr><button value = {2} name="mode" onClick={this.handleChange}>Montrer les chambres avec de la place</button></tr>
<tr><button value = {3} name="mode" onClick={this.handleChange}>Montrer les chambres pleines</button></tr>

handleChange(event) {
    this.setState({[event.target.name] : event.target.value});
}

此状态基于数组更改渲染

let txt = myarray.map((item) => {
        console.log(this.state.mode);
        console.log(item);
        if(item===null)
            return(<div>Problème</div>);
        if(this.state.mode===0)
            return(<div>{item.info}</div>);
        else if ((this.state.mode===1)&& (b1))
            return(<div>{item.info}</div>);
        else if((this.state.mode===2) && (b2))
            return (<div>{item.info}</div>);
        else if((this.state.mode===3) && (b3))
            return (<div>{item.info}</div>);
        else return(<div>Invalid item</div>);
    });
return txt;

启动程序时，

mode设置为0，一切正常。但是，当我更改mode时，每个项目都会返回无效的项目（即使对于mode=0也是如此）。我尝试将b1，b2和b3设置为true进行测试，但是它不起作用，所以这不是问题。 2 console.log可以正常工作并显示正确的值。

有人可以帮我吗？问题的价值所在吗？

Answer 1

将值解析为整数

handleChange(event) {
    this.setState({[event.target.name] : parseInt(event.target.value)});
}

Answer 2

您可以将其作为Number arg（稍后将尝试使用if语句检查）作为arg发送给该函数，如下所示：

<tr>
  <button name="mode" onClick={e => this.handleChange(e,3)}>
    Montrer les chambres pleines
  </button>
</tr>

handleChange(event, value) {
  this.setState({[event.target.name] : value});
}

更新状态会使数组呈现错误

2 个答案: