我有一个状态已声明的数组。

this.state = {
  typeAdded: []
}


现在,我有两个表都具有复选框。现在,我要做的是,如果用户单击复选框,那么我将在该数组中添加该值;如果未选中它,那么我将从该数组中删除该值。现在在这里

if (e.currentTarget.checked) {
      this.setState({
        typeAdded: this.state.typeAdded.concat([type])
      }, () => {
        this.setState({
          areResumesSameType: this.state.typeAdded.every((val, i, arr) => val === arr[0])
        })
      })
    } else {
      this.setState({
        typeAdded: this.state.typeAdded.filter(function (a) {
          return a !== type
        })
      }, () => {
        this.setState({
          areResumesSameType: this.state.typeAdded.every((val, i, arr) => val === arr[0])
        })
      });
    }


现在,这里的tracked or untrakced只有两种类型的值。

因此数组将具有

["tracked", "tracked", "untracked", "tracked", "untracked"] kind of values . It represents which type of table value is checked.


现在,当我尝试在取消选中时从此表中删除值之一时,则在删除它时会删除所有与我使用filter匹配的值。因此,我正在尝试删除当时唯一的一个值,因为其他值可能已经过检查,但它们也正在删除。

谁能帮我这个 ?

最佳答案

array.filter()不适合您的设置。如果计划将typeAdded作为字符串数组,请使用[""]。如果您具有多个相同的值,则该方法将无法有效地仅删除基于一个值的单个项目。

如果要保持typeAdded不变,可以尝试改用基于索引的值。

例如,请参见此处的codeandbox:https://codesandbox.io/s/gallant-bardeen-7rxmh

class App extends React.Component {
  state = {
    typeAdded: []
  }

  handleOnChange = (event, index) => {
    const newState = [...this.state.typeAdded]
    if(event.currentTarget.checked){
      newState[index] = "tracked"
      this.setState({
        typeAdded: [...newState]
      })
    } else {
      newState[index] = "untracked"
      this.setState({
        typeAdded: [...newState]
      })
    }
  }

  render() {
    return (
      <div className="App">
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 0)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 1)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 2)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 3)}/>
      </div>
    );
  }
}


本质上,您只需要取消.filter()并按索引切换值即可。

10-06 05:03
查看更多