dark版

react使用typeScript,props、state 类型定义

  1. props state 类型定义
  2. input 事件 event 类型定义
// 定义 Props 类型
export interface Props { 
    name: string;
    value: string; 
}
// 定义 State 类型
export interface State{
    value: string;
}
// 使用类型
class Hello extends React.Component<Props, State, {}> {

    constructor( props: Props ){
        super( props )
        this.state = {
            value: this.props.value || ""
        }
        this.changeValue = this.changeValue.bind(this)
    }

    changeValue( event: React.ChangeEvent<HTMLInputElement> ){
        this.setState({
            value: event.target.value
        })
    }

    render() {
        return (
            <div className="header-wrap" >
                <div className="submit-input-wrap" >
                    <span>{ this.props.name }</span>
                    <Input value={ this.state.value } onChange={ this.changeValue } placeholder="请输入" />
                    <Button type="primary" >添加</Button>
                </div>
            </div>
        )
    }
}

export default Hello