NOTEBOOK2
NOTEBOOK2

2018-01-10

1 参考Input组件

import * as React from 'react'
import { connect, Classes } from 'utils'

const styles = {
  input: {
    outline: 'none',
    border: 'none',
    borderRadius: 3,
    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,0.15), inset 0 1px 1px 0 rgba(16,22,26,0.20);',
    background: '#fff',
    height: 40,
    padding: '0 10px',
    verticalAlign: 'middle',
    lineHeight: 40,
    color: '#182026',
    fontSize: 16,
    fontWeight: 400,
    transition: 'box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9)',
    appearance: 'none',
    "&::placeholder": {
      color: 'rgba(92,113,128,0.5)'
    }
  }
}

interface Props {
  type: string;
  name: string;
  placeholder: string;
  onChange: (event: React.ChangeEvent)=> void;
  classes: Classes;
}

function Input({type, name, onChange, classes, placeholder}: Props){
  return (
    
  )
}

export default connect(Input, {styles})

得出最简单的 多行文本组件

// import * as cs from "classnames"
import * as React from "react"
import { connect } from "utils"
// import { label as labelStyle, ctrl as ctrlStyle, staticStyle } from "./styles"

const styles = {
  textArea: {
    backgroundColor: "#f7f7f7",
    border: "none",
    resize: "none",
  },
}

interface Props {
  name: string
  rows: number
  cols: number
  placeholder: string
  onChange?: (event: React.ChangeEvent) => void
  classes?: Classes
}

function TextArea({name, rows, cols, onChange, classes, placeholder}: Props) {
  return (