reactjs - React-widgets DateTimePicker 无法正常工作，给出无法分配给类型“只读”的错误'

Question

嗨，我是 TypeScript 的新手。我无法理解这个错误。如果有人可以提供帮助，那将不胜感激。我试图用谷歌搜索这个问题并试图改变它的版本，但不确定是什么导致了这个错误。我在我semantic-ui-react的 with中使用这个日期选择器react-final-form。DateTimePicker我的 DateInput 组件在我的导入上给了我一个问题。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);

这是错误

标签： reactjstypescriptsemantic-ui-reactreact-final-formreact-widgets

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 版本有关

希望这对你有用