从0开始学前端第五十课：React表单与用户输入

mls学习小记

已于 2024-01-26 00:08:57 修改

阅读量598

点赞数 7

分类专栏：从0开始学前端文章标签：前端 react.js javascript

于 2024-01-25 16:48:21 首次发布

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135848548

版权

从0开始学前端专栏收录该内容

81 篇文章 2 订阅

订阅专栏

第五十课：React表单与用户输入

学习目标

在本课程结束后，你应该能够：

理解React中表单处理的基本概念。
了解什么是受控组件以及如何使用它们来管理表单数据。
理解非受控组件以及与受控组件的区别。

学习内容

1. 表单处理基础

概念: 表单元素通常会维护自己的状态，并根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能通过使用setState()来更新。

代码示例:

class SimpleForm extends React.Component {
  state = { value: '' };

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

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

预计输出: 渲染一个带有文本输入的表单，当提交表单时，弹出包含用户输入内容的警告框。

2. 受控组件

概念: 受控组件不维护自己的内部状态；它们接收其值作为props，并且通知变化通过回调（如onChange）。

代码示例:

class ControlledForm extends React.Component {
  state = { value: '' };

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

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

预计输出: 渲染一个输入框，输入时字符被转为大写。

3. 非受控组件

概念: 非受控组件是一个典型的HTML表单输入，内部状态由DOM本身处理。

代码示例:

class UncontrolledForm extends React.Component {
  inputRef = React.createRef();

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.inputRef.current.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.inputRef} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

预计输出: 渲染一个表单，其中的输入框不通过state来管理，而是使用ref来获取当前输入值。

课后练习

创建一个LoginForm组件，包括用于接受用户名和密码的受控输入。
添加一个复选框，表示“记住我”的登录状态，并将其值存储在组件状态中。
创建一个SurveyForm组件，包含一系列选项作为非受控组件，并在提交时显示选中的值。

练习解析

登录表单组件:

class LoginForm extends React.Component {
  state = { username: '', password: '' };

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    // 通常是将数据发送到服务器
    console.log(this.state);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input name="username" type="text" value={this.state.username} onChange={this.handleChange} />
        </label>
        <label>
          Password:
          <input name="password" type="password" value={this.state.password} onChange={this.handleChange} />
        </label>
        <button type="submit">Login</button>
      </form>
    );
  }
}

预计输出: 用户可以输入用户名和密码，点击登录按钮时，表单的数据会被打印到控制台。

记住我复选框:

// 在LoginForm组件中
handleCheckboxChange = (event) => {
  this.setState({ rememberMe: event.target.checked });
};

// 在render方法中添加
<label>
  Remember me:
  <input name="rememberMe" type="checkbox" checked={this.state.rememberMe} onChange={this.handleCheckboxChange} />
</label>

预计输出: 增加了“记住我”的复选框，其选中状态会存储在组件的状态中。

调查表单组件:

class SurveyForm extends React.Component {
  formRef = React.createRef();

  handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(this.formRef.current);
    for (let [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
  };

  render() {
    return (
      <form ref={this.formRef} onSubmit={this.handleSubmit}>
        <label>
          <input type="radio" name="surveyOption" value="option1" /> Option 1
        </label>
        <label>
          <input type="radio" name="surveyOption" value="option2" /> Option 2
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}