下一个打字稿中复选框的代码优化

Question

我只想将数据传递给一个复选框，这样代码就不会变得多余。

我已经采取了这些，所以我可以检查一些 API 数据的最大值和最小值。

const[checkValMax, setCheckValMax]= useState(599);
const[checkValMin, setCheckValMin]= useState(0);
const handleFirstInput= () => {
    if(firstInp){
        setCheckValMin(0); setCheckValMax(599)
    }
    else{
        setCheckValMin(199);  setCheckValMax(599)
    }
}

return (  <div className='flex flex-col gap-2'>
    // this resets the price tags
    <div>
        <label className='text-sm text-gray-400 mr-4'> Reset</label>
        <input className='bg-gray-800 text-gray-400 rounded border border-stone-200 space-x-3' type='checkbox' name='inputfield' onClick={()=>handleReset()} />
    </div>
    // 1st checkbox
    <div>
        <label className='text-sm text-gray-400 mr-4'> {'>'} .99</label>
        <input className='bg-gray-800 text-gray-400 rounded border border-stone-200 space-x-3' type='checkbox' name='inputfield' onClick={()=>{setFirstInp(!firstInp);handleFirstInput() }} />
    </div>
    // 2nd checkbox
    <div>
        <label className='text-sm text-gray-400 mr-4'>.00 - .99</label>
        <input className='bg-gray-800 text-gray-400 rounded border border-stone-200 space-x-3' type='checkbox' name='inputfield' onClick={()=>{setCheckValMin(200); setCheckValMax(299) }}/>
    </div> 
    // 3rd checkbox
    <div>
        <label className='text-sm text-gray-400 mr-4'>.00 - .99</label>
        <input className='bg-gray-800 text-gray-400 rounded border border-stone-200 space-x-3' type='checkbox' name='inputfield' onClick={()=>{setCheckValMin(300); setCheckValMax(399) }}/>
    </div> 
    // 4th checkbox
    <div>
        <label className='text-sm text-gray-400 mr-4'>.00 - .99</label>
        <input className='bg-gray-800 text-gray-400 rounded border border-stone-200 space-x-3' type='checkbox' name='inputfield' onClick={()=>{setCheckValMin(400); setCheckValMax(499) }}/>
    </div> 
    // last checkbox
    <div>
        <label className='text-sm text-gray-400 mr-4'> {'<'} .00</label>
        <input className='bg-gray-800 text-gray-400 rounded border border-stone-200 space-x-3' type='checkbox' name='inputfield' onClick={()=>{setCheckValMin(0); setCheckValMax(500) }}/>
    </div>
</div> )

有没有办法定义 1 个复选框组件并向其传递值？

Answer 1

你可以做到：

const YourComponent = () => {
  const [checkValMax, setCheckValMax] = useState(599);
  const [checkValMin, setCheckValMin] = useState(0);
  const handleFirstInput = () => {
    if (firstInp) {
      setCheckValMin(0);
      setCheckValMax(599);
    } else {
      setCheckValMin(199);
      setCheckVlMax(599);
    }
  };

    const checkboxes = [
        {
            label: 'Reset',
            onClick: () => handleReset();
        },
        {
            label: ' > .99',
            onClick: () => {
                setFirstInp(!firstInp);
                handleFirstInput() 
            }
        },
        // etc...
    ]

  return (
    <div className='flex flex-col gap-2'>
        {checkboxes.map(({ label, onClick }) => 
      <div>
        <label className='text-sm text-gray-400 mr-4'>{label}</label>
        <input
          className='bg-gray-800 text-gray-400 rounded border border-stone-200 space-x-3'
          type='checkbox'
          name='inputfield'
          onClick={onClick}
        />
      </div>
        )}
    </div>
  );
};

export default YourComponent;

下一个打字稿中复选框的代码优化

Code optimization for checkboxes in next typescript

javascript

reactjs

next.js

tailwind-css