Question

我尝试使用redux-form和react-datepicker，但一直收到以下错误：

Warning: Failed prop type: Invalid prop `value` of type `object` supplied to `DatePicker`, expected `string`.

我的代码设置如下：

  renderDatePicker({input, placeholder, defaultValue="01/01/2018", meta: {touched, error} }) {
    return (
      <div>
            <DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value) : null} />
            {touched && error && <span>{error}</span>}
      </div>
    )
  };

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.submit.bind(this))}>
        <Field name='budgetDateDue'  component={this.renderDatePicker} format={(value, name) => value || null} />
        <button type='submit'>Submit</button>
      </form>
    )
  }

我似乎无法绕过这个警告，除了我已经做过的事情之外，我还没有找到很多在线信息。

Answer 1

input是一个对象，input.value是一个时刻对象。 <DatePicker />期待一个字符串，所以你需要传递一个字符串。将moment对象转换为字符串（并根据需要对其进行格式化）。

<DatePicker 
    {...input} 
    value = {moment(input.value).format('MM-YYYY')} 
    dateForm = "MM/DD/YYYY" 
    selected = {input.value ? moment(input.value) : null} 
/>

Answer 2

您可以创建自定义日期选择器并将道具传递给它

const datePicker = ({ input, label, type, className, selected, meta: { touched, error } }) => (
  <div>
    <div>
      <DatePicker {...input}
        selected={selected}
        placeholder={label}
        type={type}
        className={className}
        dropdownMode="select"
      />
      {touched && error && <span className="error_field">{error}</span>}
    </div>
  </div>
)

在redux-form组件中你可以做这样的事情

<Field
  name="date_of_birth"
  component={datePicker}
  type="text"
  selected={this.state.date_of_birth}
  onChange={this.handleChange.bind(this)}
  className="form-control"
/>

Answer 3

以下任何示例都为我工作，这是我的解决方案：

    class DateField extends Component {

      render() {
        const {
          input,
          meta: { error, touched }, 
        } = this.props;

        return (
          <div>
             <DatePicker
               {...input}
               dateForm="MM/DD/YYYY"
               selected={input.value && input.value}
               onChange={time => {
                input.value = time ? time : null;
               }}
               onBlur={() => input.onBlur(input.value)}
             />
            {touched && error && <span className="error-block">{error} 
          </span>}
        </div>
        );
      }
    }

export default DateField;

然后将其包装在一个Form元素中。

使用react-datepicker和redux-form？

3 个答案: