如何从 Chakra-ui NumberInput 组件访问名称？

Question

我想用一个处理程序动态更新我的本地状态。在常规输入中，我希望有一个带有名称和值的 event.target 属性。

数字输入似乎没有返回事件。如何在我的更改处理程序中访问组件的名称？？

组件状态

const [advanceOptions, setAdvanceOptions] = useState({
   swapFee: 1,
   lpFee: 0,
})

组件 onchange 处理程序

const onAdvanceOptionChange = (_, val) => {
  // I'd like to be able to use the statement below but NumberInput
  // does not appear to pass the event.
  setAdvanceOptions(prevState => ({...prevState, [name]: val})
}

组件 JSX

<>
<InputGroup>
  <NumberInput
   name="swapFee"
   value={advanceOptions.swapFee}
   onChange={(_, value) => onAdvanceOptionChange(value)}
   >
     <NumberInputField/>
   </NumberInput>
</InputGroup>
<InputGroup>
  <NumberInput
   name="lpFee"
   value={advanceOptions.lpFee}
   onChange={(_, value) => onAdvanceOptionChange(value)}
   >
     <NumberInputField/>
   </NumberInput>
</InputGroup>
</>

Answer 1

https://github.com/chakra-ui/chakra-ui/issues/617

你是对的，数字输入不会返回事件，虽然你可以使用Formik来实现你想要的。