Question

嗨，我是TypeScript的新手。我无法理解此错误。如果有人可以提供帮助，那将是非常有用的。我试图用谷歌搜索这个问题，并试图更改它的版本，但不确定是什么导致了此错误。我在semantic-ui-react和react-final-form中使用此日期选择器。我的DateInput组件在我的DateTimePicker导入上给我一个问题。 react-final form适用于其他输入。只是与此react widgets-> DateTimePicker有关。 这是错误

TypeScript error in C:/Users/brahm/source/repos/FullStack/SOCIALMEDIA-react-asp.netcore/Reactivities/client-app/src/app/common/form/DateInput.tsx(22,8):
Type '{ readOnly: any; as?: any; children?: ReactNode; className?: string | undefined; content?: ReactNode; control?: any; disabled?: boolean | undefined; error?: SemanticShorthandItem<LabelProps>; ... 9 more ...; time: any; }' is not assignable to type 'Readonly<DateTimePickerProps>'.
  Types of property 'id' are incompatible.
    Type 'string | number | undefined' is not assignable to type 'string | undefined'.
      Type 'number' is not assignable to type 'string | undefined'.  TS2322

这是我的DateInput组件

import { FieldRenderProps } from 'react-final-form';
import { FormFieldProps, Form, Label } from 'semantic-ui-react';
import { DateTimePicker } from 'react-widgets';

interface IProps
  extends FieldRenderProps<Date, HTMLInputElement>,
    FormFieldProps {}

const DateInput: React.FC<IProps> = ({
  input,
  width,
  date = false,
  time = false,[![enter image description here][1]][1]
  placeholder,
  meta: { touched, error },
  ...rest
}) => {
  return (
    <Form.Field error={touched && !!error} width={width}>
      <DateTimePicker
        placeholder={placeholder}
        value={input.value || null}
        onChange={input.onChange}
        date={date}
        time={time}
        {...rest}
      />
      {touched && error && (
        <Label basic color="red">
          {error}
        </Label>
      )}
    </Form.Field>
  );
};
export default DateInput;

这是渲染的地方

    <Grid>
      <Grid.Column width={10}>
        <Segment clearing>
          <FinalForm
            onSubmit={handleFinalFormSubmit}
            render={({ handleSubmit }) => (
              <Form onSubmit={handleSubmit}>
                <Field
                  name="title"
                  placeholder="Title"
                  value={activity.title}
                  component={TextInput}
                />
                <Field
                  name="discription"
                  placeholder="Description"
                  rows={3}
                  value={activity.discription}
                  component={TextAreaInput}
                />
                <Field
                  name="category"
                  placeholder="Catagory"
                  value={activity.category}
                  component={SelectInput}
                  options={category}
                />
                <Form.Group widths="equal">
                  <Field
                    component={DateInput}
                    name="date"
                    date={true}
                    placeholder="Date"
                    value={activity.date!}
                  />
                  <Field
                    component={DateInput}
                    name="time"
                    time={true}
                    placeholder="Time"
                    value={activity.date!}
                  />
                </Form.Group>

                <Field
                  name="city"
                  placeholder="City"
                  value={activity.city}
                  component={TextInput}
                />
                <Field
                  name="venue"
                  component={TextInput}
                  placeholder="Venue"
                  value={activity.venue}
                />
                <Button
                  loading={submiting}
                  floated="right"
                  positive
                  type="submit"
                  content="Submit"
                />
                <Button
                  onClick={() => history.push('/activities')}
                  floated="right"
                  type="button"
                  content="Cancel"
                />
              </Form>
            )}
          />
        </Segment>
      </Grid.Column>
    </Grid>
  );
};
export default observer(ActivityForm);

这是错误

Answer 1

TypeScript的新功能，也参加Neil Cummings的课程=）。我删除了这一行，它似乎可以正常工作：

<DateTimePicker enter code here
        placeholder={placeholder}
        value={input.value || null}
        onChange={input.onChange}
        onBlur={input.onBlur}
        onKeyDown={(e) => e.preventDefault()}
        date={date}
        time={time}
        //{...rest}
    />

问题似乎与安装的react-widget版本有关

希望它对您有用

React-widgets DateTimePicker不起作用，给出错误，无法分配给类型“ Readonly <DateTimePickerProps>”

1 个答案: