Question

我需要创建一个表单，根据API的返回值显示内容。我正在使用以下代码：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value); //error here
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} /> // error here
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

我收到以下错误：

error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.

我在代码中评论的两行中出现此错误。这段代码甚至不是我的，我从反应官方网站（https://reactjs.org/docs/forms.html）得到了它，但它不在这里工作。

我正在使用create-react-app工具。

Answer 1

Component is defined就像这样：

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

意味着州（和道具）的默认类型是：{} 如果您希望组件在状态中具有value，那么您需要像这样定义它：

class App extends React.Component<{}, { value: string }> {
    ...
}

或者：

type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}

Answer 2

除了@ nitzan-tomer的答案外，您还可以选择使用人脸：

interface MyProps {
  ...
}

interface MyState {
  value: string
}

class App extends React.Component<MyProps, MyState> {
  ...
}

Either很好，只要您保持一致即可。

Answer 3

我建议使用

仅用于字符串状态值

export default class Home extends React.Component<{}, { [key: string]: string }> { }

用于字符串键和任何类型的状态值

export default class Home extends React.Component<{}, { [key: string]: any}> { }

对于任何键/任何值

export default class Home extends React.Component<{}, { [key: any]: any}> {}

Answer 4

问题是您尚未声明接口状态用您合适的变量类型的“值”替换任何一个

Here is a good reference

interface AppProps {
   //code related to your props goes here
}

interface AppState {
   value: any
}

class App extends React.Component<AppProps, AppState> {
  // ...
}

Answer 5

如果您不想传递接口状态或道具模型，可以尝试一下

class App extends React.Component <any, any>

Answer 6

event.target的类型为EventTarget，它并不总是具有值。如果它是DOM元素，则需要将其转换为正确的类型：

handleChange(event) {
    this.setState({value: (event.target as HTMLInputElement).value});
}

这也将推断状态变量的“正确”类型，尽管显式可能更好

Answer 7

根据官方的ReactJs文档，您需要以默认格式女巫传递参数：

P = {} // default for your props
S = {} // default for yout state

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

或者定义您自己的类型，如下所示：（只是一个exp）

interface IProps {
    clients: Readonly<IClientModel[]>;

    onSubmit: (data: IClientModel) => void;
}

interface IState {
   clients: Readonly<IClientModel[]>;
   loading: boolean;
}

class ClientsPage extends React.Component<IProps, IState> {
  // ...
}

typescript and react whats react component P S mean

how to statically type react components with typescript

财产价值＆＃39;类型＆＃39; Readonly＆lt; {}＆gt;＆＃39;

7 个答案: