【React】表单

受控组件

本质上其实就是将表单中的控件和视图模型(状态)进行绑定，之后都是针对状态进行操作。

一个基本的受控组件

文本框，用户输入的内容会在状态中进行管理：

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <h2>受控组件示例</h2>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="输入内容" 
      />
      <p>输入的内容：{inputValue}</p>
    </div>
  );
};

export default ControlledComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

对用户输入的内容进行限制

限制了用户输入的内容：

import React, { useState } from 'react';

const RestrictedInput = () => {
  const [inputValue, setInputValue] = useState('');
  
  const handleChange = (event) => {
    const value = event.target.value;
    // 在这个示例中，我们限制用户输入的内容为纯数字，你可以根据需要修改限制条件
    const regex = /^[0-9]*$/;
    if (regex.test(value)) {
      setInputValue(value);
    }
  };

  return (
    <div>
      <h2>限制输入的受控组件示例</h2>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="只能输入数字" 
      />
      <p>输入的内容：{inputValue}</p>
    </div>
  );
};

export default RestrictedInput;
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

在这个示例中，我们使用了正则表达式来限制用户输入的内容为纯数字。在

文本域

import React, { useState } from 'react';

const ControlledTextarea = () => {
  const [textareaValue, setTextareaValue] = useState('');

  const handleChange = (event) => {
    setTextareaValue(event.target.value);
  };

  return (
    <div>
      <h2>受控文本域示例</h2>
      <textarea
        value={textareaValue}
        onChange={handleChange}
        placeholder="输入内容"
        rows={5} // 设置文本域的行数
        cols={50} // 设置文本域的列数
      />
      <p>输入的内容：{textareaValue}</p>
    </div>
  );
};

export default ControlledTextarea;
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

单选与多选框

以下是单选框和多选框的受控组件示例：

import React, { useState } from 'react';

const ControlledCheckbox = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <h2>单选框示例</h2>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        是否选中
      </label>
      <p>选中状态：{isChecked ? '是' : '否'}</p>
    </div>
  );
};

const ControlledRadio = () => {
  const [selectedOption, setSelectedOption] = useState('option1');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <h2>单选按钮示例</h2>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleOptionChange}
        />
        选项1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleOptionChange}
        />
        选项2
      </label>
      <p>选中的选项：{selectedOption}</p>
    </div>
  );
};

const ControlledInputs = () => {
  return (
    <div>
      <ControlledCheckbox />
      <hr />
      <ControlledRadio />
    </div>
  );
};

export default ControlledInputs;
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

在这个示例中，我们分别创建了两个组件，一个是用于处理复选框的ControlledCheckbox组件，另一个是用于处理单选按钮的ControlledRadio组件。它们都使用了useState来管理状态。

下拉列表

下面是一个下拉列表的受控组件示例：

import React, { useState } from 'react';

const ControlledSelect = () => {
  const [selectedOption, setSelectedOption] = useState('');

  const handleSelectChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <h2>下拉列表示例</h2>
      <select value={selectedOption} onChange={handleSelectChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
      </select>
      <p>选择的选项：{selectedOption}</p>
    </div>
  );
};

export default ControlledSelect;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

非受控组件

在大多数情况下，react 中使用的都是受控组件。某些情况下，需要传统 dom 进行处理。需要使用非受控组件。

基本示例

非受控组件通常在不需要手动控制组件状态的情况下使用。以下是一个基本的非受控组件示例，展示了如何使用ref来访问DOM元素的值：

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    // 使用ref.current.value来获取输入框的值
    alert('输入的内容是: ' + inputRef.current.value);
  };

  return (
    <div>
      <h2>非受控组件示例</h2>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          ref={inputRef} 
          placeholder="输入内容" 
        />
        <button type="submit">提交</button>
      </form>
    </div>
  );
};

export default UncontrolledComponent;
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

在这个示例中，我们使用了useRef来创建一个引用inputRef，它会指向输入框的DOM元素。当表单被提交时，我们可以通过inputRef.current.value来获取输入框的值。这里并没有使用useState来存储输入框的值，因此这是一个非受控组件。

默认值

非受控组件可以在初始化时给定默认值，这可以通过在组件的defaultValue属性上设置值来实现。以下是一个示例：

import React, { useRef } from 'react';

const UncontrolledComponentWithDefault = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    // 使用ref.current.value来获取输入框的值
    alert('输入的内容是: ' + inputRef.current.value);
  };

  return (
    <div>
      <h2>非受控组件示例（带默认值）</h2>
      <form onSubmit={handleSubmit}>
        {/* defaultValue属性用于设置输入框的默认值 而不是 value */}
        <input 
          type="text" 
          defaultValue="默认值"
          ref={inputRef} 
          placeholder="输入内容" 
        />
        <button type="submit">提交</button>
      </form>
    </div>
  );
};

export default UncontrolledComponentWithDefault;
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

在这个示例中，输入框的默认值被设置为"默认值"，用户可以在此基础上进行修改。当用户提交表单时，通过inputRef.current.value可以获取到输入框中的值。

文件上传

import React, { useRef } from 'react';

const UncontrolledFileUpload = () => {
  const fileInputRef = useRef(null);

  const handleUpload = () => {
    // 使用fileInputRef.current.files来获取上传的文件列表
    const fileList = fileInputRef.current.files;
    if (fileList.length > 0) {
      const uploadedFile = fileList[0];
      alert(`已上传文件：${uploadedFile.name}`);
      // 在这里可以执行文件上传的操作
    } else {
      alert('请选择要上传的文件');
    }
  };

  return (
    <div>
      <h2>非受控文件上传示例</h2>
      <input 
        type="file" 
        ref={fileInputRef} 
        accept=".jpg, .jpeg, .png, .gif" // 可选的文件类型
      />
      <button onClick={handleUpload}>上传文件</button>
    </div>
  );
};

export default UncontrolledFileUpload;
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

在这个示例中，我们使用了useRef来创建一个引用fileInputRef，它会指向文件上传输入框的DOM元素。当用户选择文件并点击上传按钮时，我们可以通过fileInputRef.current.files来获取用户选择的文件列表。然后我们可以执行文件上传的相关操作，例如显示已上传文件的名称。