在窗体中切换单个按钮

Question

我正在尝试用电子邮件和通信渠道实现一个表单，并希望更新该表单，然后保存它。在更新时，我面临切换按钮/图标的问题。请查找以下代码：

const [checked, setChecked] = useState(false);

  const toggleChecked = (e) => {
    setChecked((checked) => {
      return !checked;
    });
  };  




const form = useForm({
        initialValues: {
          email: "",
          communication: [
            {
              email: {
                email: "",
                notification: true,
              },
              whatsapp: {
                notification: false,
              },
            },
          ],
        },

我的表格内容如下：

 <form>
            <Table>
                <thead>
                  <tr>
                    <th>Communication channel</th>
                    <th>Notifications</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Email</td>
                    <td>
                      
                      {checked? (
                        <CheckCircleIcon
                          className="h-6 w-6 text-green-500"
                          onClick={() => toggleChecked()}
                        />
                      ) : (
                        <XCircleIcon
                          className="h-6 w-6 text-red-500"
                          onClick={() => toggleChecked()}
                        />
                      )}
                      
                    </td>
                  </tr>
                  <tr>
                    <td>Whatsapp</td>
                    <td>
                      {checked? (
                        <CheckCircleIcon
                          className="h-6 w-6 text-green-500"
                          onClick={() => toggleChecked()}
                        />
                      ) : (
                        <XCircleIcon
                          className="h-6 w-6 text-red-500"
                          onClick={() => toggleChecked()}
                        />
                      )}
                    </td>
                  </tr>
                </tbody>
              </Table>
        </form>

我想要的：

绿色滴答和红十字会表示对应通道的布尔值。然后应该是可点击的，并改变为相反的符号。此外，存储在内存中的用户文档也应该更改。

，我现在有什么问题，

如果我单击电子邮件的第一个图标，whatsapp的第二个图标也在改变，我想单击单个元素来更改它们的状态。我能做什么?请建议一下。

Answer 1

使用两种状态，如：emailChecked和whatsappChecked，以及相应的切换处理程序：

 const toggleEmailChecked = () => {
    setEmailChecked((checked) => {
      return !checked;
    });
  }; 

 const toggleWhatsappChecked = () => {
    setWhatsappChecked((checked) => {
      return !checked;
    });
  }; 

Answer 2

首先，您需要维护每个电子邮件通道的检查状态，如下所示

const [emailChecked, setEmailChecked] = useState(false);
const [whatsappChecked, setWhatsappChecked] = useState(false);

现在你需要有两个切换功能，一个用于电子邮件，一个用于whatsapp。

//for email
const toggleEmailChecked = (e) => {
setEmailChecked(!emailChecked);
};

///for whatsapp
const toggleWhatsAppChecked = (e) => {
setWhatsappChecked(!whatsappChecked);
};  

现在用这样的方式

<form>
        <Table>
            <thead>
              <tr>
                <th>Communication channel</th>
                <th>Notifications</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Email</td>
                <td>
                  
                  {emailChecked? (
                    <CheckCircleIcon
                      className="h-6 w-6 text-green-500"
                      onClick={() => toggleEmailChecked()}
                    />
                  ) : (
                    <XCircleIcon
                      className="h-6 w-6 text-red-500"
                      onClick={() => toggleEmailChecked()}
                    />
                  )}
                  
                </td>
              </tr>
              <tr>
                <td>Whatsapp</td>
                <td>
                  {whatsappChecked? (
                    <CheckCircleIcon
                      className="h-6 w-6 text-green-500"
                      onClick={() => toggleWhatsAppChecked()}
                    />
                  ) : (
                    <XCircleIcon
                      className="h-6 w-6 text-red-500"
                      onClick={() => toggleWhatsAppChecked()}
                    />
                  )}
                </td>
              </tr>
            </tbody>
          </Table>
    </form>

希望这能帮上忙。

Answer 3

第一解-2分离状态

解决问题的一个方法是跟踪两个不同的状态，例如：

const [whatsappChecked, setWhatsappChecked] = useState(false);
const [emailChecked, setEmailChecked] = useState(false);

然后，每个按钮都会调用自己的设置器，如下所示：

 <CheckCircleIcon 
   className="h-6 w-6 text-green-500" 
   onClick={() => setWhatsappChecked(!whatsappChecked)}
 />

和

<CheckCircleIcon 
   className="h-6 w-6 text-green-500" 
   onClick={() => setEmailChecked(!emailChecked)}
 />

第二个解决方案-提取组件并将状态保持在组件中

第二个解决方案是将状态和图标提取为单独的组件。在该组件中，您将跟踪用户是否以现在的方式切换单个按钮，只使用一种状态。

const [isChecked, setIsChecked] = useState(false);

但是您将调用该组件两次，每个按钮一次。每个组件将保持自己的独立状态，并且不知道另一个按钮的状态。

组件的外观如下所示：

function ToggleButton() {
 const [isChecked, setIsChecked] = useState(false);

return isChecked? <CheckCircleIcon
                     className="h-6 w-6 text-green-500"
                     onClick={() => setIsChecked(!isChecked)}
                  /> 
                : <XCircleIcon
                      className="h-6 w-6 text-red-500"
                      onClick={() => setIsChecked(!isChecked)}
                   />
}

你会把它称为你的形式

<tr>
  <td>Email</td>
  <td><ToggleButton /></td>
</tr>
<tr>
  <td>Whatsapp</td>
  <td><ToggleButton /></td>
</tr>

稍后，如果您需要访问每个单独按钮的状态，您可以侦听每个单独组件上的事件并注册单击的效果，或者读取按钮的状态。