时间戳

首页 > 解决方案 > 警告：道具类型失败：提供给“withStyles(SingleDatePicker)”的“object”类型的无效道具“focused”，应为“boolean”

reactjs - 警告：道具类型失败：提供给“withStyles(SingleDatePicker)”的“object”类型的无效道具“focused”，应为“boolean”

问题描述

我正在尝试实现 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>

标签： reactjsdatereact-hooks

解决方案

我正在处理同样的问题。如果你使用 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
    />

推荐阅读