React入门学习-Ant Design(三)

2021-10-06 20:43 约 446 字预计阅读 3 分钟 - 次阅读

警告

本文最后更新于 2021-10-06 21:22，文中内容可能已过时。

本文接着使用上一篇的项目代码

安装Antd

1
yarn add antd

使用antd组件

修改src/App.js

1
2
3
4
5
6
7
// 添加如下两行引入antd组件
import { Input, Button } from "antd"
import 'antd/dist/antd.css'

// 修改之前的input和button
      <Input type="text" style={{width: 200}} value={val} onChange={this.handleChange} />
      <Button type="primary" onClick={this.handleAdd}>添加</Button>

使用search组件实现添加

1.定义search组件

1
const Search = Input.Search

2.使用Search组件，最终代码如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// import './App.css';

import React from "react";
import { Input, Button } from "antd"
import 'antd/dist/antd.css'

const Search = Input.Search

class App extends React.Component{
  state = {
    val: '',
    li: []
  }

  handleChange = (event) => {
    this.setState({
      val: event.target.value
    })
  }

  handleAdd = () => {
    const { val, li } = this.state
    li.push(val)
    this.setState({
      li
    })
    console.log(this.state)
  }

  handleSearch = (value) => {
    const { li } = this.state
    li.push(value)
    this.setState({
      li
    })
  }
  render(){
    const { val, li } = this.state

    return <div>
      <Input type="text" style={{width: 200}} value={val} onChange={this.handleChange} />
      <Button type="primary" onClick={this.handleAdd}>添加</Button>
      <Search
      placeholder="input search text"
      allowClear
      enterButton="添加"
      size="middle"
      style={{width: 270}}
      onSearch={this.handleSearch}
    />
      <ul>
        {
          li.map((item, index)=>{
            return <li key={index}>{item}</li>
          })
        }
      </ul>

    </div>
  }
}

export default App;

使用Select组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// import './App.css';

import React from "react";
import { Input, Button, Select } from "antd"
import 'antd/dist/antd.css'

const Search = Input.Search
const Option = Select

class App extends React.Component{
  state = {
    val: '',
    li: []
  }

  handleChange = (event) => {
    this.setState({
      val: event.target.value
    })
  }

  handleAdd = () => {
    const { val, li } = this.state
    li.push(val)
    this.setState({
      li
    })
    console.log(this.state)
  }

  handleSearch = (value) => {
    const { li } = this.state
    li.push(value)
    this.setState({
      li
    })
  }
  render(){
    const { val, li } = this.state

    return <div>
      <Input type="text" style={{width: 200}} value={val} onChange={this.handleChange} />
      <Button type="primary" onClick={this.handleAdd}>添加</Button>
      <Search
      placeholder="input search text"
      allowClear
      enterButton="添加"
      size="middle"
      style={{width: 270}}
      onSearch={this.handleSearch}
      />

      <Select defaultValue="" style={{ width: 120 }}>
        {li.map((item, index)=>{
          return <Option value={item} key={index}>{item}</Option>
        })}
      </Select>
      
      <ul>
        {
          li.map((item, index)=>{
            return <li key={index}>{item}</li>
          })
        }
      </ul>

    </div>
  }
}

export default App;

请我喝杯水

赞赏

微信号

微信打赏