React事件的正确类型是什么.最初我只是any为了简单起见而使用.现在,我正在努力清理并避免any完全使用.
所以用这样一个简单的形式:
export interface LoginProps {
login: {
[k: string]: string | Function
uname: string
passw: string
logIn: Function
}
}
@inject('login') @observer
export class Login extends Component<LoginProps, {}> {
update = (e: React.SyntheticEvent<EventTarget>): void => {
this.props.login[e.target.name] = e.target.value
}
submit = (e: any): void => {
this.props.login.logIn()
e.preventDefault()
}
render() {
const { uname, passw } = this.props.login
return (
<div id='login' >
<form>
<input
placeholder='Username'
type="text"
name='uname'
value={uname}
onChange={this.update}
/>
<input
placeholder='Password'
type="password" …打字稿 2.3.4，反应 15.5.4 和反应引导 0.31.0。
我有一个FormControl，我想在用户按下回车键时做一些事情。
控制：
<FormControl
name="keyword"
type="text"
value={this.state.keyword}
onKeyPress={this.handleKeywordKeypress}
onChange={(event: FormEvent<FormControlProps>) =>{
this.setState({
keyword: event.currentTarget.value as string
});
}}
/>
参数的定义应该handleKeywordKeypress是什么？
我可以这样定义：
handleKeywordKeypress= (e: any) =>{
log.debug("keypress: " + e.nativeEvent.code);
};
这将被调用，它会打印kepress: Enter但类型应该是什么，e以便我可以将值与（什么？）进行比较以判断是否按下了 Enter 键。
在javascript中以下行的typescript中语义等价的语法是什么
//Some knockout event handler.
myFunc(data : string, evt : Event) {
//If enter or tab key up were detected add the excuse to the collection.
if(evt.enterKey || evt.which == 9)
//Do Something
}
我遇到的麻烦不像常规的javascript事件,typescript事件类没有属性enterKey或which.那么如何在不获取打字稿编译错误和丑陋的红色摇摆下划线的情况下检测哪个键被按下？
我正在做一个 React 编码挑战，需要在 KeyUp 上更新一个值。我最初将它设置为更新 onChange 但测试需要 onKeyUp 所以我尝试将其更改为该值，但我的字段不再更新并且我无法在 textarea 中输入任何内容。
class MarkdownApp extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
this.handleKeyUp = this.handleKeyUp.bind(this);
}
handleKeyUp(event) {
this.setState({ value: event.target.value })
}
render() {
return (
<form>
<label>
Enter your markdown here:
<br />
<textarea value={this.state.value} onKeyUp={this.handleKeyUp} id='editor' />
<br />
</label>
<label>
Your markup will be previewed here:
<p id='preview'>{marked(this.state.value)}</p>
</label>
</form>
);
}
}
ReactDOM.render(
<MarkdownApp />,
document.getElementById('root')
);
就像我说的，当它是 onChange 并且我的函数是 handleChange 时，这很好用，但是因为我切换了它，所以我无法输入任何内容。
我正在尝试创建一个自定义“输入”组件并扩展默认的 html 输入属性（props）。
然而，我还尝试在我自己的接口定义中使用 Typescript 的 Omit 覆盖默认的“size”属性，但似乎无法让它工作。
（我也尝试过 Typescript 的选择/排除和自定义覆盖类型，但得到相同的错误......）
我已经尝试过类似的线程：
import React from 'react';
type A = React.HTMLAttributes<HTMLInputElement>;
interface InputProps extends Omit<A, 'size'> {
size?: 'sm' | 'md' | 'lg';
}
const Input = (props: InputProps) => {
return <input {...props} />;
};
传输错误
(property) JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
Type '{ size?: "sm" | "md" | "lg"; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; ... 250 …