如何在反应日期时间选择器中获得 e.target.name？

Question

我正在创建一个可以获取时间选择器时间值的表单。但是由于 e 已经是 Moment，我无法在 handleChange.

中获取输入 name

有办法得到吗？

组件：

        <DateTimeRangePicker
          selected={time}
          onChange={handleChange}
          type='timepicker'
          readOnly={false}
          texts={{
            name: 'time',
            placeholder: 'Enter your time out'
          }}
          timeFormat='HH:MM:SS'
        />

texts?.name 将是一个道具，将在 DatetimepickerProps

的 innerProps 内

CustomForm handleChange

  const [values, setValues] = useState(initialState)
  const [data, setData] = useState(initialState)

  const handleChange = useCallback(
        (e: any) => {
          let result: any

          setValues({ ...values, [e.target.name]: e })
          if (e._isValid === true) {
            result = {
              value: e._d,
              status: true
            }
          } else {
            result = {
              value: e._d,
              status: false
            }
          }
          setData({ ...data, [e.target.name]: result })
        },
        [data]
      )

它必须是 e.target.name，因为 CustomForm onSubmit 将通过其 e.target.name

获取其他输入组件

Answer 1

对于来自 react-datetime-picker

的组件 DateTimeRangePicker

您从选择器 onChange 收到的内容与您从 Jsx 元素收到的典型 event 不同；而是选择器

的时间value

你可以通过这个在源码中看到link

一个解决方案是包装您的 handleChange 并使用常量定义您的属性的名称，如下所示

const TIME_NAME = "time";


const YourComponent = () => {

    const [values, setValues] = useState(initialState)
    const [data, setData] = useState(initialState)

    const handleChange = useCallback(
        (e: any) => {
          let result: any

          setValues({ ...values, [e.target.name]: e.target.value })
          if (e._isValid === true) {
            result = {
              value: e.target.value,
              status: true
            }
          } else {
            result = {
              value: e.target.value,
              status: false
            }
          }
          setData({ ...data, [e.target.name]: result })
        },
        [data]
      );

    const handleDateTimeRangePickerChange = (_value) => {
        handleChange({target: {name: TIME_NAME, value: _value }});
    }


    return <DateTimeRangePicker
        name={TIME_NAME}
        selected={time}
        onChange={handleDateTimeRangePickerChange}
        type='timepicker'
        readOnly={false}
        texts={{
          name: 'time',
          placeholder: 'Enter your time out'
        }}
        timeFormat='HH:MM:SS'
    />
}

如何在反应日期时间选择器中获得 e.target.name？

How to get e.target.name in react-datetime picker?

datetime

datetimepicker

reactjs

react-native