Question

我对react.js还是很陌生，所以如果我第一次尝试不了解所有内容，请道歉。

我的问题是我不了解如何使用钩子更新复选框的状态。

这是我用来生成复选框的代码（来自react-bootstrap）：

复选框组件：

        <Form.Group controlId="briefing">
          {['Component1', 'Component2', 'Component3', 'Component4'].map((component)=>(
            <Form.Check
              custom
              inline
              label={component}
              name={component}
              type="checkbox"
              id={`module-component-${component}`}
              onChange={(e)=>handleComponentChange(e)}
            />
          ))}
        </Form.Group>

handleComponentChange（）：

const [inputs, setInputs] = useState({});

const handleComponentChange = (event) => {
  event.persist()

  setInputs(inputs=>({
    ...inputs,
    components:{
      ...inputs.components,
      name:event.target.name
    }
  }))  
}

我在这种形式的其他输入字段中输入的...inputs。

这不符合我的意愿。状态正在更新，但被最后检查的项目覆盖：

    {
      "components":{
        "name":"Component1"
      },
        "customfield_10313":"Input 1",
        "customfield_10411":"Input 2",
        "customfield_10405":"Input 3",
        "customfield_10385":"input 4"
    }

我希望看到的结果是这样的：

{
  "components":[
  {
     "name":"Component1"
  },
  {
     "name":"Component2"
  },
  {
     "name":"Component3"
  },
  {
     "name":"Component4"
  }
  ]
}

我需要此结构来进行API调用。

我知道您需要检查复选框是否已选中，然后删除该项目。那是我的下一个问题。

谢谢您的投入！

Answer 1

由于您希望组件状态包含一个数组，因此需要像对其进行更新一样。另外，当您取消选中复选框时（即项目已经在数组中时），您还需要确保从列表中删除项目

const handleComponentChange = (event) => {
  event.persist()

  setInputs(inputs=>{
   // find it component is already there. If yes remove it
   const index = inputs.components.findIndex(item => item.name === event.target.name);
   if(index > -1) {
       return {
          ...inputs,
          components: [
            ...inputs.components.slice(0, index),
            ...inputs.components.slice(index + 1),
          ]
       }
    } else {
       // push item into array
       return {
          ...inputs,
          components: inputs.components.concat({name: event.target.name}),
       }
    }
  }) 
}

使用useState更新React中多个复选框的状态

1 个答案: