如何使用 React 获取复选框的值

Question

我有一个由两个输入（emain、密码）和一个复选框组成的表单。代码在这里：

<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
  <TextField
    margin="normal"
    required
    fullWidth
    id="email"
    label="Email adress"
    name="email"
    autoComplete="email"
    autoFocus
  />
  <TextField
    margin="normal"
    required
    fullWidth
    name="password"
    label="Password"
    type="password"
    id="password"
    autoComplete="current-password"
  />
  <FormControlLabel
    control={<Checkbox value="remember" color="primary" />}
    label="Remember me"
  />
  <Button
    type="submit"
    fullWidth
    variant="contained"
    sx={{ mt: 3, mb: 2 }}
  >
    Sign in
  </Button>
</Box>

要获取电子邮件和密码的值，我使用 smth.like:

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });
  };

但是获取复选框“记住我”的值的最佳做法是什么（在 FormControlLabel 中）？当然，我可以创建一个新函数来处理复选框的变化，例如：

<FormControlLabel
 control={<Checkbox value="remember" color="primary" />}
 onChanges = {newFunction}
 label="Remember me"
/>

但我认为这不是一个好主意，因为我不需要得到这个复选框的所有变化，我只需要在提交表单的那一刻知道这个复选框的值。

Answer 1

你应该使用 Usestate 钩子

处理多个复选框：Link

      import React, {useState} from 'react'
        
        export default () => {
            const [fName, setfName] = useState('');
            const [lName, setlName] = useState('');
            const [phone, setPhone] = useState('');
            const [email, setEmail] = useState('');
            const [isChecked, setIsChecked] = useState(false);
    
            const handleOnChange = () => {
               setIsChecked(!isChecked);
      };
        
        const submitValue = () => {
            const frmdetails = {
                'First Name' : fName,
                'Last Name' : lName,
                'Phone' : phone,
                'Email' : email
            }
            console.log(frmdetails);
        }
        
        return(
            <>
            <hr/>
 <div className="topping">
        <input
          type="checkbox"
          id="topping"
          name="topping"
          value="Paneer"
          checked={isChecked}
          onChange={handleOnChange}
        />
        Paneer
      </div>
            <input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} />
            <input type="text" placeholder="Last Name" onChange={e => setlName(e.target.value)} />
            <input type="text" placeholder="Phone" onChange={e => setPhone(e.target.value)} />
            <input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} />
            <button onClick={submitValue}>Submit</button>
            </>
            )
        }

Answer 2

正如您所指出的，您可以使用 React 状态控制复选框，但如果您在表单中则不需要，因为表单拥有其中每个输入元素的信息，但为了为此，您必须在每个输入元素上设置一个 name 属性，然后您可以通过实例化一个 FormData:

来读取这些值

  const handleSubmit = (e) => {
       e.preventDefault();
       const formData = new FormData(e.target);
       const data = formData.entries();
       for (const entry of data) console.log(entry);
  };

这里有一个工作示例：https://stackblitz.com/edit/react-ictfjr

如何使用 React 获取复选框的值

How to get checkbox value using React

javascript

reactjs

material-ui