使用 useState 过滤复选框

Question

我有很多东西

const reportsData = [
    {
      name: 'Walter',
      Laudos: 1,
    },
    {
      name: 'John',
      Laudos: 20,
    },
  ]

然后在我的 react 组件上，我需要在单击复选框时设置一个状态，使我的列表仅过滤该名称。喜欢：

const [searchUser, setSearchUser] = useState('')

{reportsData
                .filter((value: any) => {
                  if (searchUser == '') {
                    return value
                  } else if (
                    value.name
                      .toLowerCase()
                      .includes(searchUser.toLowerCase())
                  ) {
                    return value
                  }
                })

然后在复选框上

<input
  type="checkbox"
  checked={john} // just for example
  onChange={john} // just for example
  className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>

我需要当我按下这个时，它会将searchUser 的值更改为“John”。

在这里查看了很多回复，但每个回复都很混乱 asf 或使用 this.setState 而不是 useState。

我怎样才能做到这一点？

Answer 1

以这种方式定义状态：

const [searchUser, setSearchUser] = useState([])

然后以这种方式添加每个复选框：

<input
  type="checkbox"
  thisUser="john" // just change this name to make checkbox for another user
  defaultChecked={false}
  onChange={changeSearchUser}
  className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>

将此函数添加到您的组件中：

function changeSearchUser(e){
  if (e.target.checked) {
    setSearchUser(previousSreach => [...previousSreach, e.target.thisUser])
  }
  else {
    setSearchUser(previousSreach => {
      const index = previousSreach.indexOf(e.target.thisUser)
      if (index > -1) {
        return previousSreach.splice(index, 1);
      }
    })
  }
}