state

1
import { useState } from 'react'
2

3
export default function Form() {
4
  const [isSent, setIsSent] = useState(false)
5
  const [message, setMessage] = useState('Hi!')
6
  if (isSent) {
7
    return <h1>Your message is on its way!</h1>
8
  }
9
  return (
10
    <form
11
      onSubmit={e => {
12
        e.preventDefault()
13
        setIsSent(true)
14
        sendMessage(message)
15
      }}>
16
      <textarea placeholder='Message' value={message} onChange={e => setMessage(e.target.value)} />
17
      <button type='submit'>Send</button>
18
    </form>
19
  )
20
}
21

22
function sendMessage(message) {
23
  // ...
24
}

1
import { useState } from 'react';
2

3
export default function Counter() {
4
  const [number, setNumber] = useState(0);
5

6
  return (
7
    <>
8
      <h1>{number}</h1>
9
      <button onClick={() => {
10
        setNumber(number + 1);
11
        setNumber(number + 1);
12
        setNumber(number + 1);
13
      }}>+3</button>
14
    </>
15
  )
16
}

1
import { useState } from 'react';
2

3
export default function Counter() {
4
  const [number, setNumber] = useState(0);
5

6
  return (
7
    <>
8
      <h1>{number}</h1>
9
      <button onClick={() => {
10
        setNumber(number + 5);
11
        setTimeout(() => {
12
          alert(number);
13
        }, 3000);
14
      }}>+5</button>
15
    </>
16
  )
17
}

1
import { useState } from 'react';
2

3
export default function Counter() {
4
  const [number, setNumber] = useState(0);
5

6
  return (
7
    <>
8
      <h1>{number}</h1>
9
      <button onClick={() => {
10
        setNumber(n => n + 1);
11
        setNumber(n => n + 1);
12
        setNumber(n => n + 1);
13
      }}>+3</button>
14
    </>
15
  )
16
}

1
import { useState } from 'react';
2

3
export default function MovingDot() {
4
  const [position, setPosition] = useState({
5
    x: 0,
6
    y: 0
7
  });
8
  return (
9
    <div
10
      onPointerMove={e => {
11
        position.x = e.clientX;
12
        position.y = e.clientY;
13
      }}
14
      style={{
15
        position: 'relative',
16
        width: '100vw',
17
        height: '100vh',
18
      }}>
19
      <div style={{
20
        position: 'absolute',
21
        backgroundColor: 'red',
22
        borderRadius: '50%',
23
        transform: `translate(${position.x}px, ${position.y}px)`,
24
        left: -10,
25
        top: -10,
26
        width: 20,
27
        height: 20,
28
      }} />
29
    </div>
30
  );
31
}

1
import { useState } from 'react';
2

3
let nextId = 0;
4

5
export default function List() {
6
  const [name, setName] = useState('');
7
  const [artists, setArtists] = useState([]);
8

9
  return (
10
    <>
11
      <h1>振奋人心的雕塑家们：</h1>
12
      <input
13
        value={name}
14
        onChange={e => setName(e.target.value)}
15
      />
16
      <button onClick={() => {
17
        artists.push({
18
          id: nextId++,
19
          name: name,
20
        });
21
      }}>添加</button>
22
      <ul>
23
        {artists.map(artist => (
24
          <li key={artist.id}>{artist.name}</li>
25
        ))}
26
      </ul>
27
    </>
28
  );
29
}

1
import { useState } from 'react'
2

3
let initialArtists = [
4
  { id: 0, name: 'Marta Colvin Andrade' },
5
  { id: 1, name: 'Lamidi Olonade Fakeye' },
6
  { id: 2, name: 'Louise Nevelson' },
7
]
8

9
export default function List() {
10
  const [artists, setArtists] = useState(initialArtists)
11

12
  return (
13
    <>
14
      <h1>振奋人心的雕塑家们：</h1>
15
      <ul>
16
        {artists.map(artist => (
17
          <li key={artist.id}>
18
            {artist.name}{' '}
19
            <button
20
              onClick={() => {
21
                setArtists(artists.filter(a => a.id !== artist.id))
22
              }}>
23
              删除
24
            </button>
25
          </li>
26
        ))}
27
      </ul>
28
    </>
29
  )
30
}

1
import { useState } from 'react'
2

3
let initialShapes = [
4
  { id: 0, type: 'circle', x: 50, y: 100 },
5
  { id: 1, type: 'square', x: 150, y: 100 },
6
  { id: 2, type: 'circle', x: 250, y: 100 },
7
]
8

9
export default function ShapeEditor() {
10
  const [shapes, setShapes] = useState(initialShapes)
11

12
  function handleClick() {
13
    const nextShapes = shapes.map(shape => {
14
      if (shape.type === 'square') {
15
        // 不作改变
16
        return shape
17
      } else {
18
        // 返回一个新的圆形，位置在下方 50px 处
19
        return {
20
          ...shape,
21
          y: shape.y + 50,
22
        }
23
      }
24
    })
25
    // 使用新的数组进行重渲染
26
    setShapes(nextShapes)
27
  }
28

29
  return (
30
    <>
31
      <button onClick={handleClick}>所有圆形向下移动！</button>
32
      {shapes.map(shape => (
33
        <div
34
          key={shape.id}
35
          style={{
36
            background: 'purple',
37
            position: 'absolute',
38
            left: shape.x,
39
            top: shape.y,
40
            borderRadius: shape.type === 'circle' ? '50%' : '',
41
            width: 20,
42
            height: 20,
43
          }}
44
        />
45
      ))}
46
    </>
47
  )
48
}

1
import { useState } from 'react'
2

3
let initialCounters = [0, 0, 0]
4

5
export default function CounterList() {
6
  const [counters, setCounters] = useState(initialCounters)
7

8
  function handleIncrementClick(index) {
9
    const nextCounters = counters.map((c, i) => {
10
      if (i === index) {
11
        // 递增被点击的计数器数值
12
        return c + 1
13
      } else {
14
        // 其余部分不发生变化
15
        return c
16
      }
17
    })
18
    setCounters(nextCounters)
19
  }
20

21
  return (
22
    <ul>
23
      {counters.map((counter, i) => (
24
        <li key={i}>
25
          {counter}
26
          <button
27
            onClick={() => {
28
              handleIncrementClick(i)
29
            }}>
30
            +1
31
          </button>
32
        </li>
33
      ))}
34
    </ul>
35
  )
36
}

1
import { useState } from 'react'
2

3
let nextId = 3
4
const initialArtists = [
5
  { id: 0, name: 'Marta Colvin Andrade' },
6
  { id: 1, name: 'Lamidi Olonade Fakeye' },
7
  { id: 2, name: 'Louise Nevelson' },
8
]
9

10
export default function List() {
11
  const [name, setName] = useState('')
12
  const [artists, setArtists] = useState(initialArtists)
13

14
  function handleClick() {
15
    const insertAt = 1 // 可能是任何索引
16
    const nextArtists = [
17
      // 插入点之前的元素：
18
      ...artists.slice(0, insertAt),
19
      // 新的元素：
20
      { id: nextId++, name: name },
21
      // 插入点之后的元素：
22
      ...artists.slice(insertAt),
23
    ]
24
    setArtists(nextArtists)
25
    setName('')
26
  }
27

28
  return (
29
    <>
30
      <h1>振奋人心的雕塑家们：</h1>
31
      <input value={name} onChange={e => setName(e.target.value)} />
32
      <button onClick={handleClick}>插入</button>
33
      <ul>
34
        {artists.map(artist => (
35
          <li key={artist.id}>{artist.name}</li>
36
        ))}
37
      </ul>
38
    </>
39
  )
40
}

1
import { useState } from 'react'
2

3
const initialList = [
4
  { id: 0, title: 'Big Bellies' },
5
  { id: 1, title: 'Lunar Landscape' },
6
  { id: 2, title: 'Terracotta Army' },
7
]
8

9
export default function List() {
10
  const [list, setList] = useState(initialList)
11

12
  function handleClick() {
13
    const nextList = [...list]
14
    nextList.reverse()
15
    setList(nextList)
16
  }
17

18
  return (
19
    <>
20
      <button onClick={handleClick}>翻转</button>
21
      <ul>
22
        {list.map(artwork => (
23
          <li key={artwork.id}>{artwork.title}</li>
24
        ))}
25
      </ul>
26
    </>
27
  )
28
}

1
import { useState } from 'react'
2
import { useImmer } from 'use-immer'
3

4
let nextId = 3
5
const initialList = [
6
  { id: 0, title: 'Big Bellies', seen: false },
7
  { id: 1, title: 'Lunar Landscape', seen: false },
8
  { id: 2, title: 'Terracotta Army', seen: true },
9
]
10

11
export default function BucketList() {
12
  const [myList, updateMyList] = useImmer(initialList)
13
  const [yourList, updateYourList] = useImmer(initialList)
14

15
  function handleToggleMyList(id, nextSeen) {
16
    updateMyList(draft => {
17
      const artwork = draft.find(a => a.id === id)
18
      artwork.seen = nextSeen
19
    })
20
  }
21

22
  function handleToggleYourList(artworkId, nextSeen) {
23
    updateYourList(draft => {
24
      const artwork = draft.find(a => a.id === artworkId)
25
      artwork.seen = nextSeen
26
    })
27
  }
28

29
  return (
30
    <>
31
      <h1>艺术愿望清单</h1>
32
      <h2>我想看的艺术清单：</h2>
33
      <ItemList artworks={myList} onToggle={handleToggleMyList} />
34
      <h2>你想看的艺术清单：</h2>
35
      <ItemList artworks={yourList} onToggle={handleToggleYourList} />
36
    </>
37
  )
38
}
39

40
function ItemList({ artworks, onToggle }) {
41
  return (
42
    <ul>
43
      {artworks.map(artwork => (
44
        <li key={artwork.id}>
45
          <label>
46
            <input
47
              type='checkbox'
48
              checked={artwork.seen}
49
              onChange={e => {
50
                onToggle(artwork.id, e.target.checked)
51
              }}
52
            />
53
            {artwork.title}
54
          </label>
55
        </li>
56
      ))}
57
    </ul>
58
  )
59
}