React学习日志4

最新推荐文章于 2023-03-31 09:55:23 发布
最新推荐文章于 2023-03-31 09:55:23 发布
阅读量211 收藏
点赞数
分类专栏： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35355153/article/details/108116360
版权

五、事件处理

1、react事件处理与DOM相似但语法有不同

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

// 传统html

<button οnclick="activateLasers()">

  Activate Lasers

</button>

// react

<button onClick={activateLasers}>

  Activate Lasers

</button>

  • 在 React 中不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。

// 传统html

<a href="#" οnclick="console.log('The link was clicked.'); return false">

  Click me

</a>

// react

function ActionLink() {

  function handleClick(e) {

    e.preventDefault();

    console.log('The link was clicked.');

  }

  return (

    <a href="#" onClick={handleClick}>

      Click me

    </a>

  );

}

  • 一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。只需要在该元素初始渲染的时候添加监听器即可。

2、事件处理函数声明的方法

构造器绑定bind

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    }
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }))
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    )
  }
}
ReactDOM.render(<Toggle />, document.getElementById('root'

使用 class fields 语法

class LoggingButton extends React.Component {


  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

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

回调中使用箭头函数

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }

在回调中使用箭头函数在大多数情况下没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

3、向事件处理程序传递参数

// 箭头函数 事件对象显式传递
<button onClick={(e) => this.deleteRow(id, e)}>
  Delete Row
</button>

// Function.prototype.bind 事件对象及更多参数隐式传递
<button onClick={this.deleteRow.bind(this, id)}>
  Delete Row
</button>

六、条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

1、使用if或条件运算符

function UserGreeting(props) {
  return <h1>welcome back!</h1>
}

function GuestGreeting(props) {
  return <h1>please sign up.</h1>
}

function Greeting(props) {
  let isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />
  }
  return <GuestGreeting />
}

ReactDOM.render(<Greeting isLoggedIn={false} />, document.getElementById('ro

2、元素变量

使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

function LoginButton(props) {
  return (<button onClick={props.onClick}>Login</button>)
}

function LogoutButton(props) {
  return (<button onClick={props.onClick}>Logout</button>)
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    }
  }

  handleLoginClick() {
    this.setState({
      isLoggedIn: false
    })
  }

  handleLogoutClick() {
    this.setState({
      isLoggedIn: true
    })
  }

  render() {
    let isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LoginButton onClick={() => this.handleLoginClick()} />
    } else {
      button = <LogoutButton 
                onClick=  {() => this.handleLogoutClick()} />
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    )
  }
}
ReactDOM.render(<LoginControl />, document.getElementById('ro

3、与运算符&&

true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

render() {
    let isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LoginButton onClick={() => this.handleLoginClick()} />
    } else {
      button = <LogoutButton onClick={() => this.handleLogoutClick()} />
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {isLoggedIn && button}
      </div>
    )
  }

4、三目运算符

另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。

render() {
    let isLoggedIn = this.state.isLoggedIn;
    let button = isLoggedIn ?
      <LoginButton onClick={() => this.handleLoginClick()} />
      :
      <LogoutButton onClick={() => this.handleLogoutClick()} />

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    )

5、阻止组件渲染

可以让 render 方法直接返回 null，而不进行任何渲染 。返回 null 并不会影响组件的生命周期

function WarningBanner(props) {
  if (!props.warn) {
    return null
  }
  return (<div>Warning!</div>)
}

class Page extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showWarning: true
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }
    ));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleClick} >
          {this.state.showWarning ? 'hide' : 'show'}
        </button>
      </div>
    )
  }
}
ReactDOM.render(<Page />, document.getElementById('roo

七、列表与key

1、渲染多个组件

通过使用 {} 在 JSX 内构建一个元素集合

let numbers = [1, 2, 3, 4, 5]
const listItems = numbers.map((item) =>
  <li>{item}</li>
)
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'))

2、基础列表组件

将前面的例子重构成一个组件

function NumberList(props) {
  let numbers = props.numbers;
  let listItems = numbers.map(item => <li>{item}</li>)
  return (
    <ul>{listItems}</ul>
  )
}
let numbers = [1, 2, 3, 4, 5]
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'))

此时会报错：Warning: Each child in a list should have a unique "key"  prop.意思是要创建玩才能用。所以给每列元素分配一个key <li key={item.toString()}>{item}</li>

3、key

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。通常会使用数据中的 id 来作为元素的 key，万不得已你可以使用元素索引 index 作为 key

  • key提取组件：元素的key只有放在就近数组的上下文才有意义。
  • 一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。
  • key 只是在兄弟节点之间必须唯一：当我们生成两个不同的数组时，我们可以使用相同的 key 值
  • key会传递信息给React但不会传递给组件，要使用key值要用其他属性显式传递

4、在JSX中嵌入map()

JSX 允许在大括号中嵌入任何表达式

function ListItem(props) {
  return (
    <li>{props.value}</li>
  )
}
// function NumberList(props) {
//   let numbers = props.numbers;
//   let listItems = numbers.map(number =>
//     <ListItem key={number.toString()} value={number} />)
//   return (
//     <ul>{listItems}</ul>
//   )
// }
// =============
function NumberList(props) {
  let numbers = props.numbers
  return (
    <ul>
      {
        numbers.map(number => <ListItem key={number.toString()} value={number} />)
      }
    </ul>
  )
}
let numbers = [11, 22, 33, 44, 55]
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'))

八、表单

1、受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。 把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

class NameForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: ""
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this)
  }

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

  handleSubmit(event) {
    console.log('提交的名字' + this.state.name)
    event.preventDefault()
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:<input type="text" value={this.state.name} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    )
  }
}
ReactDOM.render(<NameForm />, document.getElementById('root

对于受控组件来说，输入的值始终由 React 的 state 驱动。

2、textarea标签

class TextArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: ""
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({
      text: event.target.value
    })
  }

  handleSubmit(event) {
    console.log('提交的名字' + this.state.text)
    event.preventDefault()
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          文章:<textarea type="text" value={this.state.text} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    )
  }
}
ReactDOM.render(<TextArea />, document.getElementById('root'

3、select标签

选中的实现--定义根select标签的value属性，而不使用selected

class SelectFrom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 3,
      selectArr: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    console.log('修改', event.target.value)
    this.setState({
      value: event.target.value
    })
  }

  handleSubmit(event) {
    console.log('提交的选择' + this.state.value)
    event.preventDefault()
  }

  // 生命周期--挂载
  componentDidMount() {
    let selectArr = [
      {
        "code": 1,
        "name": "a",
      },
      {
        "code": 2,
        "name": "b",
      },
      {
        "code": 3,
        "name": "c",
      },
      {
        "code": 4,
        "name": "d",
      },
      {
        "code": 5,
        "name": "e",
      },
    ]
    this.setState({
      selectArr: selectArr,
    })
  }
  render() {
    let arr = this.state.selectArr
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择:
          <select value={this.state.value} onChange={this.handleChange}>
            {
              arr.map((item, index) =>
                < OptionItem key={index} value={item.code} name={item.name} />
              )
            }
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    )
  }
}
function OptionItem(props) {
  return (
    <option value={props.value}>{props.name}</option>
  )
}
ReactDOM.render(<SelectFrom />, document.getElementById('roo

select multiple 多选实现

 

4、处理多个输入

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。

class MoreInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      age: "",
      check: true
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    let target = event.target;
    let name = target.name;
    console.log(target.checked)
    let value = target.name == 'check' ? target.checked : target.value
    this.setState({
      [name]: value
    })
  }

  handleSubmit(event) {
    console.log('提交:' + JSON.stringify(this.state))
    event.preventDefault()
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          姓名:<input type="text" value={this.state.name} onChange={this.handleChange} name="name" />
        </label>
        <br />
        <label>
          年龄:<input type="text" value={this.state.age} onChange={this.handleChange} name="age" />
        </label>
        <br />
        <label>
          选择:<input type="checkbox" checked={this.state.check} onChange={this.handleChange} name="check" />
        </label>
        <br />
        <label>
          <input type="submit" value="提交" />
        </label>
      </form>
    )
  }
}
ReactDOM.render(<MoreInput />, document.getElementById('root

5、受控组件输入空值

在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。

ReactDOM.render(<input value="h" />, mountNode);
setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

6、非受控组件

受控组件表单数据是由React组件来管理的。非受控组件表单数据由DOM节点处理。

1)使用ref来从DOM 节点中获取表单数据

class NameRefForm extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.input = React.createRef()
  }
  handleSubmit(event) {
    console.log(this.input.current.value)
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          姓名:<input type="text" ref={this.input} />
        </label>
        <input type='submit' value="提交" />
      </form>
    )
  }
}


ReactDOM.render(<NameRefForm />, document.getElementById('roo

2）默认值

在非受控组件赋予组件一个初始值可以使用defaultValue属性而不是value。

checkbox、radio支持defaultChecked;select、textarea支持defaultValue。

<input defaultValue="Roman" type="text" ref={this.input} />

 

3）文件input标签

<input type="file" />始终是非受控组件。文件input标签的value是只读的，值只能用户设置而不能通过代码控制。

使用ref实现提交表单获取文件信息：

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.file = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this)
  }


  handleSubmit(event) {
    console.log(this.file.current.files[0].name)
    event.preventDefault()
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>file:
          <input ref={this.file} type="file" />
        </label>
        <br />
        <input type="submit" value="submit" />
      </form>
    )
  }
}
ReactDOM.render(<FileInput />, document.getElementById('root')

其他

4、表单实现可以使用Formik

如果想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，用 Formik 是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上 —— 所以不要忽视学习它们。

rm_ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React学习笔记
qq_38932407的博客
04-20 947
JSX简介 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录JSX简介前言一、JSX二、元素渲染三、元素渲染1.更新已渲染的元素2.React 只更新它需要更新的部分总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、JSX React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI
react-基于reactjs官方demo修改功能方便学习和自己使用的日志小工具
08-14
在这个"react-基于reactjs官方demo修改功能方便学习和自己使用的日志小工具"项目中，我们可以深入理解React的基本概念和实践技巧。 首先，"基于reactjs官方demo修改功能"意味着该项目是基于React官方提供的示例代码...
【 React 】组件基础
CharlynYanyan的博客
05-19 288
React 组件基础
新手学习 react 迷惑的点(完整版)
油墨香^-^的博客
07-22 234
setState是React非常重要的一个方法，值得大家好好去研究一下他的原理。
react 更新input 默认值setfieldsvalue_React理解
weixin_39834149的博客
12-03 517
1 React简介1.1背景介绍React首次被提出是来自于Facebook 2014年的F8开发者大会上。现在基于HTML页面开发越来越复杂。当用传统方式解决来自于服务器上和用户输入的交互数据动态的反应到复杂界面上的时候，代码量变得越来越大，越来越难以维护，常常显得力不从心！基于此Google提出了AngularJS框架，但其整体是一个MVVM框架，有些过重，不适用于那些对性能比较高的web站。...
React事件处理
橘猫吃不胖的博客
03-06 1108
React事件处理1 React事件处理2 React中事件处理函数2.1 使用ES6的箭头函数2.2 在constructor函数中bind2.3 在render函数中绑定this2.4 几种方式的比较3 事件处理中传参3.1 直接传递参数3.2 使用data自定义属性4 事件流5 事件委托6 事件对象 1 React事件处理 React与DOM事件处理的不同之处： （1）React事件的命名方式是小驼峰方式，DOM的命名方式是小写。例如：DOM的命名：onclick，React的命名：onClick。
React常见的一些坑
最新发布
06-02
在React开发过程中，开发者经常会遇到各种“坑”，这些坑可能是由于对React API的理解不深入、最佳实践的忽视或者与...不断学习和实践是避免踩坑的关键，同时保持对React生态的新特性和最佳实践的关注也是十分必要的。
reactdemo.zip
06-14
在React项目中，通常会忽略编译产生的临时文件、日志文件等，以保持仓库整洁。 3. **craco.config.js**：CRACO（Create React App Configuration Override）是为了在Create React App（CRA）的基础上进行配置覆盖而...
React-minireduxminireactredux
08-14
总的来说，"React-mini-redux"和"mini-react-redux"是为了解决小型React项目中状态管理的简化工具，它们剥离了Redux的部分复杂性，但仍保留了核心功能，使得开发者能以更低的学习成本和更少的代码量实现状态管理。...
react-饿了么外卖React版本
08-15
这个项目可能包含了React的基础组件、状态管理、路由、API调用等多个方面，是学习React实战技能的一个优秀资源。 在React开发中，"其它杂项"标签可能涵盖了一些不局限于基础组件和状态管理的高级特性，如性能优化、...
react-changelog：轻松将您的更改日志包含为React组件
02-11
React变更日志 轻松将您的变更日志包含为React组件 演示版 安装 npm install --save react-changelog 用法 import React , { Component } from " react " ; import ReactChangelog from " react-changelog " ; class Example extends Component { render () { return < ReactChangelog xss=removed>; } } 执照 麻省理工学院:copyright:
在react中对自己的组件使用setFieldsValue
热门推荐
qq_36990322的博客
07-29 2万+
setFieldsValue的用法 setFieldsValue是antd form的一个api，其作用是对指定的已使用from包裹的表单进行value设置。那么所以它的功能也很简单，那就是给指定的input设置value。 如下所示： import React from "react"; import { Form, Input } from 'antd'; class TestForm ex...
react 更新input 默认值setfieldsvalue_React 基础入门
weixin_39652810的博客
12-06 479
React 起源于 Facebook 内部项目，是一个用来构建用户界面的 Javascript 库，相当于MVC架构中的V层框架，与市面上其他框架不同的是，React 把每一个组件当成了一个状态机，组件内部通过 state 来维护组件状态的变化，当组件的状态发生变化时，React 通过虚拟DOM技术来增量并且高效的更新真实DOM。本文将对React 的这些特点进行简单的介绍。Hello React...
React事件处理中this使用解决办法：箭头函数+class fields语法
weixin_43260489的博客
09-15 1521
前言 在React中，我们对事件命名采用小驼峰式（camelCase），而不是纯小写。 传统HTML、React中JSX写法： // 传统html <button onclick="handleClickBtn()">按钮</button> // React JSX <button onClick={handleClickBtn}>按钮</button> 在传统HTML写法里，onclick="handleClickBtn()"，引号内部是js代码，当触发事
react 更新input 默认值setfieldsvalue_React系列（二）组件三大属性
weixin_39961855的博客
12-06 524
之前曾经提到过，React是面向组件开发的，每一个组件是一个类，React核心库通过实例化组件类，使用diff算法将JSX语法标签最终渲染为真实的DOM。今天总结一下组件的三大属性，即：state，props，refs；一、三大属性之 “state“state被称为组件的状态机，通过更新组件的state重新渲染组件。state内容更新后，必须要调用 setState方法重新渲染，达到更新...
在react当中我们如何实现单表的简单日志功能？
qq_53509791的博客
03-31 429
在date组件当中，我们是通过onchang方法，在input当中我们是使用onblurs的方法，在select组件当中我们使用的是onselect的方法，来进行失去焦点以后数据的一个获取。然后我们这边的数据更新的话使用的是antd的date和input、select的组件，然后我们需要在我们的这几个边框当中定义监听事件来监听数据的变化。首先我们需要在我们的Modal的中流出空余的位置来显示我们更新数据之后的显示日志的地方。这里我们使用的是一个antd里面的modal弹框和一个tabs的一个组件。
react实战笔记65:过滤日志2
qq_41632427的博客
10-20 73
前端
React 错误处理和日志记录的思考与设计
C.
09-07 1173
在平时的工作，js报错是比较常见的一个情景，当出现错误的时候，用户上报问题我们往往需要去定位问题的原因，但是因为错误存在于用户的客户端，所以我们没法很好的拿到错误的信息，所以如果当我们前端js出现异常的时候能及时上报的话，那我们的问题就比较好解决了。我们先不考虑使用现成的平台，因为我们想要的功能比较简单，而且部署一套监控平台公司不一定允许，所以可以考虑在自己项目中进行处理，不引用第三方的平台。，网上比较多推荐的是：sentry，它对异常数据的收集和分析更加完善，如果公司有条件私有化部署的话比较推荐使用。
react学习日志4
rain_tsubasa的博客
10-13 311
demo class NavLink extends Component { render(){ let { label, to, activeOnlyWhenExact } = this.props; return ( <Route path={to} exact={activeOnlyWhen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值