React高级技术与集成（翻译）-五八三

原文链接：blog.arjunsingh.tech/superchargi…

写在前面

在掘金写过很多文章，准确来说是记录学习过程的笔记，或者项目中碰到的问题，甚至于心情；刚开始不知道掘金有活动可以参加，后面等发现有活动可以参加的时候，已经have no time to write or record, coding all the time。

之所以决定翻译下面这篇文章，算是学英语的过程中发现的，感觉文章很简洁、通俗易懂，言语精炼、所以在翻译的时候在表达作者的意思的同时，也尽可能的保持了作者精炼简洁的风格。

当时还评论了作者、机缘巧合之下作者竟然reply了，受宠若惊。综合以上所以决定翻译此文章；这是一个系列文章，本章节是系列文章的第三章节。

下面贴出当时给文章的评论以此纪念：

简介

欢迎来到react系列文章（4章节），在react系列文章之第一章节、我们探索了在web开发方面为什么react是更受喜爱的框架；接着在react系列文章之第二章节，我们深入到components、state以及props的核心概念。

现在，在第三章节，通过探索react的高级的技术与集成，将我们的react技巧进一步提升；下面我们讨论的主题包括：“事件处理、表单操作、外部库的集成“，接下来准备好加强你的react技巧、解锁更多可能性。

react中的事件处理

react提供一种简单直观的事件处理方式去处理用户交互，下面是在react组件中如何处理事件：

在函数组件中处理事件：






import React from 'react';




function Button() {
  const handleClick = () => {
    console.log('Button clicked!');

  };
  return <button onClick={handleClick}>Click Me</button>;
}

export default Button;

在类组件中处理事件：






import React, { Component } from 'react';






class Input extends Component {
  handleClick() {
    console.log('Button clicked!');

  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

export default Input;

react中的表单操作

在众多web应用中，form表单扮演着必不可少的角色，react通过是管理表单的状态、以及提供方便快捷的事件处理器来简化了表单处理，下面是一些例子：

受控组件：受控组件中，react托管了状态绑定到表单组件上，而无需用户通过额外的事件进行赋值状态

import React, { Component } from 'react';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }

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



  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.username, this.state.password);
  }

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

export default LoginForm;

非受控组件：表单的状态变化需要开发人员手动维护，如下代码中，input表单上的绑定值input变量需要开发人员手写箭头函数进行状态赋值






import React, { Component } from 'react';






class SearchBar extends Component {
  handleSubmit(event) {
    event.preventDefault();
    console.log(this.input.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={input => (this.input = input)} />
        <button type="submit">Search</button>
      </form>
    );
  }
}

export default SearchBar;

在react中集成外部库

react的灵活性允许我们无缝的集成外部库并使用外部库的功能，下面是一个关于在react中集成外部库的简短说明：

安装外部库：






npm install library-name

导入并使用外部库






import React, { Component } from 'react';


import LibraryComponent from 'library-name';

class MyApp extends Component {
  render() {
    return (
      <div>
        <h1>My App</h1>
        <LibraryComponent />
      </div>
    );
  }
}



export default MyApp;