React中的受控复选框

debugcn 发表于 Dev

原始的

我试图将所有选中的复选框放在状态数组中。我可以向数组中添加值，但是当我取消选中该框时，无法删除该值。我尝试使用拼接和按索引删除，也尝试通过过滤器删除。它可以工作，但是工作缓慢且不正确。例如，我可以取消选中所有复选框，并且一个值保持状态。请检查我在做什么错这是一个沙盒链接，下面是我的代码

const [state, setState] = useState({
    address: [],
  })

  const checkboxChange = (e) => {
    const { name, checked } = e.target
    if (checked === true) {
      setState((prevState) => ({
        ...prevState,
        address: [...prevState.address, name],
      }))
    }
    if (checked === false) {
      setState((prevState) => ({
        ...prevState,
        address: [...prevState.address].filter((it) => it.id !== it.id),
      }))
    }
  }

{list.map((it, index) => (
        <div key={it.id}>
          <label>
            <input
              className="mr-2"
              checked={state.address.index}
              key={it.id}
              name={it.id}
              defaultValue="false"
              onChange={checkboxChange}
              type="checkbox"
            />
            {it.name}
          </label>
        </div>
      ))}

德鲁·里斯（Drew Reese）

问题

您正在比较it.id !== it.id哪个将始终为false。

解

state.address是一组ID，与没有对象id属性，你要比较对输入的每一个name的onChange事件对象。

只是过滤 prevState.address
比较 el !== name

码

const checkboxChange = (e) => {
  const { name, checked } = e.target;

  if (checked) {
    setState((prevState) => ({
      ...prevState,
      address: [...prevState.address, name],
    }))
  } else {
    setState((prevState) => ({
      ...prevState,
      address: prevState.address.filter((el) => el !== name),
    }))
  }
}

受控输入

如果您确实希望控制您的输入，那么我建议：

将检查的值存储在地图中
只需切换onChange事件中的检查值
使用输入的value属性与defaultValue属性

码

const App = (props) => {
  const [state, setState] = useState({
    address: {}, // <-- object map
  })

  useEffect(() => {
    console.log(state)
  }, [state])

  const checkboxChange = (e) => {
    const { name } = e.target
    setState((prevState) => ({
      ...prevState,
      address: {
        ...prevState.address,
        [name]: !prevState.address[name], // <-- toggle state
      },
    }))
  }

  return (
    <div>
      {list.map((it, index) => (
        <div key={it.id}>
          <label>
            <input
              className="mr-2"
              checked={state.address.index}
              key={it.id}
              name={it.id}
              value={state.address[it.id]} // <-- set from checked state
              onChange={checkboxChange}
              type="checkbox"
            />
            {it.name}
          </label>
        </div>
      ))}
    </div>
  )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。