React Hooks中复选框勾选显输入框功能异常及报错咨询

Let's fix this issue step by step, and I'll break down what's going wrong and how to correct it.

First, let's understand the error you're seeing:

Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked . Otherwise, set either onChange or readOnly

This error happens because you're treating the checkbox as a controlled component (binding its checked state to your React state) but aren't providing an onChange handler to update that state. React thinks you want a read-only field, but you intend for users to interact with it—hence the conflict.

Let's fix your code with two optimized options: #

Option 1: Simplify by removing redundant state (Recommended)

The showToken state is completely dependent on the checked state, so we can eliminate it entirely and just use checked to control the input's visibility:

import { useState } from 'react';

// Inside your component
const [checked, setChecked] = useState(false);

const handleCheckboxChange = (e) => {
  // Get the latest checked state directly from the event target
  const isChecked = e.target.checked;
  setChecked(isChecked);
};

return (
  <label>
    <input 
      type="checkbox" 
      onChange={handleCheckboxChange} 
      checked={checked}
    />
    {/* Use the checked state directly to show/hide the input */}
    { checked && (
      <input 
        className="inputRequest formContentElement" 
        name="token" 
        type="text" 
        placeholder="token"
      />
    ) }
  </label>
);

Option 2: Keep separate showToken state (if you need independent control later)

If you have future plans to toggle the input visibility separately from the checkbox, you can keep the state but fix the logic:

import { useState } from 'react';

// Inside your component
const [checked, setChecked] = useState(false);
// Simplify showToken to a boolean instead of an object
const [showToken, setShowToken] = useState(false);

const handleCheckboxChange = (e) => {
  const isChecked = e.target.checked;
  setChecked(isChecked);
  // Sync the showToken state with the checkbox's new state
  setShowToken(isChecked);
};

return (
  <label>
    <input 
      type="checkbox" 
      onChange={handleCheckboxChange} 
      checked={checked}
    />
    { showToken && (
      <input 
        className="inputRequest formContentElement" 
        name="token" 
        type="text" 
        placeholder="token"
      />
    ) }
  </label>
);

Key Fixes Explained: #

1. Replace onClick with onChange: Form elements like checkboxes should use onChange (not onClick) to track state changes—it's the standard React pattern for form interactions.
2. Use e.target.checked for accurate state: Your original code used setChecked(checked), which just re-set the state to its old value. Using the event target's checked property gives you the real-time state after the user clicks.
3. Eliminate redundant state (Option 1): If one state can be derived from another, don't maintain both—it reduces code complexity and avoids potential state desync issues.
4. Follow controlled component rules: For controlled components, always pair checked (or value for text inputs) with an onChange handler to keep React in sync with user interactions.

These changes will resolve the error and correctly implement your desired behavior: the checkbox starts unchecked, and the token input only appears when the checkbox is checked.

内容的提问来源于stack exchange，提问作者soccerway