4 Reactjs 不受控组件

逃离我推掉我的手 2023-02-27 12:05 59阅读 0赞

### **未受控组件** ###

如：<input />，<input onChanage=\{(e)=>\{this.setState(\{name: e.target.value\})\}\} />

只要不对value属性进行赋值，那么组件就是未受控组件，组件的值后续都不会被父组件控制

要编写一个未控制组件，你可以[使用一个 ref][ref] 来获取组件的引用，从而获取组件的值

class NameForm extends React.Component \{

constructor(props) \{

super(props);

this.handleSubmit = this.handleSubmit.bind(this);

\}

handleSubmit(event) \{

alert('A name was submitted: ' + this.input.value);

event.preventDefault();

\}

render() \{

return (

<form onSubmit=\{this.handleSubmit\}>

<label>

Name:

<input type="text" ref=\{(input) => this.input = input\} />

</label>

<input type="submit" value="Submit" />

</form>

);

\}

\}

### **默认值** ###

非受控组件可接收一个默认值作为初始值

render() \{

return (

<form onSubmit=\{this.handleSubmit\}>

<input

defaultValue="Bob"

type="text"

ref=\{(input) => this.input = input\} />

<input type="submit" value="Submit" />

</form>

);

\}

[ref]: http://www.css88.com/react/docs/refs-and-the-dom.html

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs代码示例：react-dom受控组件

这段代码是一个简单的React应用，通过使用React库和ReactDOM库来创建和渲染一个登录组件。该组件包含一个表单，用户可以在其中输入用户名和密码，点击登录按钮后会弹出一

爱被打了一巴掌/ 2024年02月17日 13:36/ 0 赞/ 98 阅读

相关 reactjs代码示例：react-dom非受控组件

这段代码是一个简单的React应用，通过使用React库和ReactDOM库来创建和渲染一个登录组件。该组件包含一个表单，用户可以输入用户名和密码，点击登录按钮后会弹出一个提示

拼搏现实的明天。/ 2024年02月17日 13:35/ 0 赞/ 131 阅读

相关 reactjs受控组件和非受控组件

非受控组件通过使用ref属性获取值。 ![在这里插入图片描述][39ab7454698d44ad862cf6f07d30c35e.png_pic_center]

╰+攻爆jí腚メ/ 2023年09月28日 16:50/ 0 赞/ 196 阅读

相关 React-受控组件

所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常

港控/mmm°/ 2023年07月04日 15:46/ 0 赞/ 218 阅读

相关 react---受控组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

清疚/ 2023年06月06日 15:27/ 0 赞/ 119 阅读

相关 react受控组件和非受控组件

react受控组件和非受控组件父组件的代码 import Control from './Control' //

深藏阁楼爱情的钟/ 2023年05月31日 15:28/ 0 赞/ 98 阅读

相关关于React中受控组件和不受控组件的选择问题分析

浅析React受控组件与非受控组件前言带着问题看文章非受控组件：受控组件：小总结

女爷i/ 2023年05月28日 06:45/ 0 赞/ 85 阅读

相关 4 Reactjs 不受控组件

未受控组件如：<input />，<input onChanage=\{(e)=>\{this.setState(\{name: e.target.value\})\}

逃离我推掉我的手/ 2023年02月27日 12:05/ 0 赞/ 60 阅读

相关 react的受控组件、非受控组件ref

import React from 'react' export default class CommentBox extends React.Componen

今天药忘吃喽~/ 2022年03月28日 04:19/ 0 赞/ 308 阅读

相关受控组件与非受控组件

文章目录受控组件更新state的流程例子非受控组件例子受控组件所谓受控组件就是每当表单的状态发生变

妖狐艹你老母/ 2021年12月12日 23:57/ 0 赞/ 368 阅读