在 React.js 中处理表单

与 Angular 等其他库不同，React 中的表单需要我们自行处理。React 中有两种类型的表单输入

• 受控输入
• 非受控输入

受控组件或元素是指由 React 函数处理的组件或元素。例如，在 onChange 函数调用时更新字段。大多数组件都以受控方式处理。

受控表单组件示例

import React, { Component } from 'react';
class ControlledFormExample extends Component {
   constructor () {
      this.state = {
         email: ''
      }
   }
   changeEmailHandler = event => {
      this.setState({
         email: event.target.value
      });
   }
   render () {
      return (
         <form>
            <input type="email"
               name="email"
               value={this.state.email}
               onChange={this.changeEmailHandler}
            />
         </form>
      );
   }
}

导出默认的 ControlledFormExample

这里，每当电子邮件输入字段发生变化时，我们都会更新状态。

如果表单中有多个字段，我们可以像下面这样在一个函数中处理所有字段的 onChange 事件 −

handleChange(evt) {
   this.setState({ [evt.target.name]: evt.target.value });
}

在上面常见的状态更新中，字段名称和状态变量应该同名。

非受控组件通常由 DOM 处理。我们使用 ref 来保存对元素的引用，并在提交操作时进行处理。

演示元素非受控处理的示例。

submitDataHandler = event => {
   event.preventDefault();
   console.log(this.refs.nameRef.value); //将返回 name 值
}
render() {
   return (
      <div>
         <form onSubmit={this.submitDataHandler}>
            <div>
               <input type="text" name="name" ref="nameRef" />
            </div>
         </form>
      </div>
   );
}

我们必须提取非受控组件中的字段值来操作或处理提交。

我们可以添加自定义验证并向用户显示反馈。

import React, { Component} from 'react';
class FormExample extends Component {
   constructor(props) {
      super(props);
      this.state = {
         username: '',
         id: null,
         errormessage: ''
      };
   }
   myChangeHandler = (event) => {
      let nam = event.target.name;
      let val = event.target.value;
      let err = '';
      if (nam === "id") {
         if (val !="" && !Number(val)) {
            err = <strong>Your id must be a number</strong>;
         }
      }
      this.setState({errormessage: err});
      this.setState({[nam]: val});
   }
   render() {
      return (
         <form>
            <h1>Hello {this.state.username} {this.state.id}</h1>
            <p>Enter your name:</p>
            <input
               type='text'
               name='username'
               onChange={this.myChangeHandler}
            />
            <p>Enter your id:</p>
            <input
               type='text'
               name='id'
               onChange={this.myChangeHandler}
            />
            {this.state.errormessage}
         </form>
      );
   }
}
ReactDOM.render(<FormExample />, document.getElementById('root'));

textarea 的值是通过其 value 属性获取的。

<textarea value={this.state.myText} />
class FormExample extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         myText: 'The content of textarea'
      };
   }
   render() {
      return (
         <form>
            <textarea value={this.state.myText} />
         </form>
      );
   }
}
ReactDOM.render(<FormExample />, document.getElementById('root'));

相关文章

• 在 React Native 应用中添加动画加载器和启动画面
• 在 React JS 中创建链接的二维码
• 使用 React-Three-Fiber 在 React 中创建天空着色器
• 在 React JS 中创建动画加载骨架
• 使用纯 CSS 和 HTML 在 React JS 中创建 PDF
• React JS 中的设备检测和响应式设计
• 使用 React-Three-Fiber 在 React 中创建 3D 金属纹理盒子
• React JS 中的文件拖放功能
• 使用 react-archer 在 React JS 中绘制 DOM 元素之间的箭头
• 使用 React JS 创建富文本编辑器

有用资源

• javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/