react del键删除

Live Editor

function Example() { const [animalList, setAnimalList] = useState([ {label: '小猫', value: 'cat'}, {label: '小狗', value: 'dog'}, {label: '小猪', value: 'pig'}, ]) const [animal, setAnimal] = useState('dog') useEffect(() => { document.onkeyup = (e) => { if(e.keyCode === 46) { // Del键 // cloneDeep 是 lodash 提供的深层克隆方法 let copyAnimalList = cloneDeep(animalList) // 如果涉及到跨组件，animal 值可以存到 store 里管理 let index = copyAnimalList.findIndex(item => item.value === animal) // 删除更新 copyAnimalList.splice(index, 1) setAnimalList(copyAnimalList) } } return () => { document.onkeyup = null } }, [animalList]) const handleChange = (e) => { setAnimal(e.target.value) } return ( <RadioGroup row value={animal} onChange={handleChange} > { animalList.map(item => { return <FormControlLabel key={item.value} value={item.value} control={<Radio />} label={item.label} /> }) } </RadioGroup> ) }

function Example() {
  const [animalList, setAnimalList] = useState([
    {label: '小猫', value: 'cat'},
    {label: '小狗', value: 'dog'},
    {label: '小猪', value: 'pig'},
  ])
  const [animal, setAnimal] = useState('dog')

  useEffect(() => {
    document.onkeyup = (e) => {
      if(e.keyCode === 46) { // Del键
        // cloneDeep 是 lodash 提供的深层克隆方法
        let copyAnimalList = cloneDeep(animalList)

        // 如果涉及到跨组件，animal 值可以存到 store 里管理
        let index = copyAnimalList.findIndex(item => item.value === animal)

        // 删除更新
        copyAnimalList.splice(index, 1)
        setAnimalList(copyAnimalList)
      }
    }
    return () => {
      document.onkeyup = null
    }
  }, [animalList])

  const handleChange = (e) => {
    setAnimal(e.target.value)
  }

  return (
    <RadioGroup
      row
      value={animal}
      onChange={handleChange}
    >
      {
        animalList.map(item => {
          return <FormControlLabel key={item.value} value={item.value} control={<Radio />} label={item.label} />
        })
      }
    </RadioGroup>
  )
}

Result

Loading...