小编lo7*_*lo7的帖子

如何处理打字稿中的 onChange

我是打字稿的新手。使用 Typescript 语言时,您通常如何处理onChangein TextField

  • handleChangeDate(e: React.ChangeEvent<any>)下面代码中的函数有效,但我收到警告,因为我使用了类型any. 我可以用哪种其他方式编写此代码?

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { TextField } from '@material-ui/core';

const [date, setDate] = useState(
    new Date().getDate() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getFullYear(),
);

const handleChangeDate = (e: React.ChangeEvent<any>): void => {
    setDate(e.target.value);
};
Run Code Online (Sandbox Code Playgroud)

typescript reactjs material-ui tsx

5
推荐指数
1
解决办法
2720
查看次数

对子项使用类型“React.ReactNode”时出现错误。我应该使用哪种类型?

使用LoaderIndicator()渲染子项的function 时收到错误消息,loading = false请参阅下面的代码。React.ReactNode当我使用而不是 type时出现错误any,但通常我使用React.ReactNodeas type 为孩子。这是我得到的错误:

'LoaderIndicator' cannot be used as a JSX component. Its return type '{}' is not a valid JSX element. Type '{}' is missing the following properties from type 'Element': type, props, key. ts(2786)

我不知道如何解决这个错误,我已经尝试了几乎所有方法,有人能帮忙吗?:)

export type LoaderIndicatorProps = {
  loading: boolean;
  children?: React.ReactNode; 
};
export function LoaderIndicator(props: LoaderIndicatorProps) {
  const { loading, children } = props;

  if (loading) {
    return (
      <div>
        <Container>
          <Icon …
Run Code Online (Sandbox Code Playgroud)

children compiler-errors typescript reactjs

4
推荐指数
1
解决办法
1万
查看次数

在 TextField 中使用日期类型时如何显示值?

我正在使用TextFieldfrom material-ui,我想在 TextField 中显示当前日期,并允许用户选择另一个日期。如果可能的话?

使用时不会value={date}出现在 中。我试图在互联网上寻找一些帮助,但找不到任何东西。代码如下:TextFieldtype="date"

  • 任何帮助表示赞赏!并提前致谢。

import React, { useState } from 'react';
import { TextField } from '@material-ui/core';
import { useForm } from 'react-hook-form';

export const AddDate: React.FC = () => {
    const [date, setDate] = useState(
        new Date().getDate() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getFullYear(),
    );

    // handles when user changes input in date inputfield
    const handleChangeDate = (e: React.ChangeEvent<HTMLInputElement>): void => {
       setDate(e.target.value);
    }; …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs material-ui

2
推荐指数
1
解决办法
6110
查看次数

React 中的 :hover 和 :focus 内联样式不起作用

我正在尝试创建一个 const 对象,它应该是一个具有 React 内联样式的按钮,但是:hoverand:focus不起作用。如何在 React 中实现悬停和焦点?

任何帮助表示赞赏!提前致谢。

const Button= {
  background: '#AC003B',
  color: '#fff',
  borderColor: '#AC003B',
  &:hover, &:focus {
    background: '#707070',
    borderColor: '#707070'
  }       
}
Run Code Online (Sandbox Code Playgroud)

css typescript reactjs

2
推荐指数
1
解决办法
6514
查看次数

标签 统计

reactjs ×4

typescript ×4

material-ui ×2

children ×1

compiler-errors ×1

css ×1

tsx ×1