react 样式库

https://ant.design/index-cn

 

import React from 'react';
import { Input, Button, List } from 'antd';

const TodoListUI = (props) => (
  <div style={{ marginTop: '10px', marginLeft: '10px' }}>
    <div>
      <Input placeholder="todo info" value={props.inputValue}
        style={{ width: '300px', marginRight: '10px' }}
        onChange={props.handleInputChange} />
      <Button type="primary" onClick={props.handleBtnClick}>Submit</Button>
    </div>
    <List size="small"
      style={{ marginTop: '10px', width: '300px' }}
      bordered
      dataSource={props.list}
      renderItem={
        (item, index) => (<List.Item onClick={() => { props.handleItemClick(index) }}>{item}</List.Item>)
      }
    />
  </div>
)

export default TodoListUI