如何在react-datetime选择器中获取e.target.name？

Question

我正在创建一个可以获取time picker的时间值的表单。但是由于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'
    />
}