警告:道具类型失败:提供给withStyles(SingleDatePicker)的对象类型无效的道具“聚焦”。

时间:2020-09-15 20:05:40

标签: reactjs date react-hooks

我正在尝试实现SingleDatePicker,但我一直收到上述错误。由于我将初始值显然设置为布尔值,所以我在做什么错了。

这是我的实现方式

  const [calendarFocused, setCalendarFocus] = useState(false);   --this a boolean not an object?
  const [createdAt, setCreatedAt] = useState(moment());

  const onChange = (event) =>
    setTimesheet({
      ...timesheet,
      [event.target.name]: event.target.value,
    });

  const onDateChange = (createdAt) => setCreatedAt(createdAt);

  const onCalendarFocusChange = (focused) => setCalendarFocus(focused);   return (
    <form>
      <h5 className='text-primary'>Add time</h5>
      <input
        type='text'
        placeholder='Enter title'
        title='title'
        value={title}
        onChange={onChange}
      />
      <select name='project'>
        <option value='project' disabled defaultValue>
          Choose your project
        </option>
        <option value='1'>Project 1</option>
        <option value='2'>Project 2</option>
        <option value='3'>Project 3</option>
      </select>
      <SingleDatePicker
        date={createdAt} // momentPropTypes.momentObj or null
        onDateChange={onDateChange} // PropTypes.func.isRequired
        focused={calendarFocused} // PropTypes.bool
        onFocusChange={onCalendarFocusChange} // PropTypes.func.isRequired
        id='#123' // PropTypes.string.isRequired,
      />
      <div>
        <input
          type='submit'
          value='Add new time'
          className='waves-effect waves-light btn-large'
        />
      </div>
    </form>

1 个答案:

答案 0 :(得分:0)

我正在处理同样的问题。如果您使用 console.log(calendarFocused),它将在控制台上打印一个对象 [focused : false]。由于 SingleDatePicker 需要一个布尔值,这将引发错误。

要解决此问题,请将 SingleDatePicker 中的“focused”编辑为以下内容:

    <SingleDatePicker
       date={createdAt} // momentPropTypes.momentObj or null
       onDateChange={onDateChange} // PropTypes.func.isRequired
       focused={calendarFocused.focused} // PropTypes.bool
       onFocusChange={onCalendarFocusChange} // PropTypes.func.isRequired
       id='#123' // PropTypes.string.isRequired
    />