React系列-非受控组件

admin 2022年5月30日01:23:34安全开发评论13 views2610字阅读8分42秒阅读模式

定义

非受控组件:表单数据不受控于state的(未绑定value),使用React ref从DOM节点中获取表单数据的组件

class App extends React.Component {


handleSubmitClick(e) {
e.preventDefault();
console.log(this.refs.usernameRef.value) //打印输入的值
console.log(this.refs.passwordRef.value)
}

handleResetClick(e) {
e.preventDefault();
}

render() {

return (
<form>
<p>
username:
<input
type="text"
placeholder="username"
ref='usernameRef'
/>

</p>
<p>
password:
<input
type="password"
placeholder="this is password "
ref='passwordRef'
/>

</p>
<p>
<button onClick={this.handleSubmitClick.bind(this)}>login</button>
<button onClick={this.handleResetClick.bind(this)}>reset</button>
</p>

</form>

)
}
}


ReactDOM.render(
<App />,
document.body
)

等效于:

 return (
<form onSubmit={this.handleSubmitClick.bind(this)}>
<p>
username:
<input
type="text"
placeholder="username"
ref='usernameRef'
/>

</p>
<p>
password:
<input
type="password"
placeholder="this is password "
ref='passwordRef'
/>

</p>
<p>
<button type='submit'>login</button>
<button onClick={this.handleResetClick.bind(this)}>reset</button>
</p>

</form>

)

推荐方式

全部代码:

import ReactDOM from 'react-dom';
import React from 'react'

class App extends React.Component {

constructor(props) {
super(props);
this.handleSubmitClick = this.handleSubmitClick.bind(this)
this.handleResetClick = this.handleResetClick.bind(this)
this.usernameRef = React.createRef();
this.passwordRef = React.createRef();//推荐方式
this.genderRef = React.createRef();
this.fileRef = React.createRef();
}


handleSubmitClick(e) {
e.preventDefault();
console.log(
this.usernameRef.current.value,
this.passwordRef.current.value,
this.genderRef.current.value,
this.fileRef.current.files[0]
)

}

handleResetClick(e) {
e.preventDefault();

}

render() {

return (
<form onSubmit={this.handleSubmitClick}>
<p>
username:
<input
type="text"
placeholder="username"
ref={this.usernameRef}
/>

</p>
<p>
password:
<input
type="password"
placeholder="this is password "
ref={this.passwordRef}
/>

</p>
<p>
<select
//form field默认值 --->
组件挂载完毕后进行更新,不会导致DOM的任何更新
defaultValue="female"
ref={this.genderRef}
>
<option value="male"></option>
<option value="female"></option>
</select>
</p>
<p>
<input
type='file'
ref={this.fileRef}
/>

</p>

{/* <input type='radio' defaultChecked={true}/>
<input type='checkbox' defaultChecked={true}/> */}
<p>
<button type='submit'>login</button>
<button onClick={this.handleResetClick}>reset</button>
</p>

</form>

)
}
}


ReactDOM.render(

<App />,
document.body

)

受控组件与非受控组件使用场景

特征 非受控组件 受控组件
one-time value retrieval (e.g. on submit) OK OK
validating on submit OK OK
instant field validation X OK
conditionally disabling submit button X OK
enforcing input format X OK
several inputs for one piece of data X OK
dynamic inputs X OK

原文:受控组件与非受控组件之间的对比(https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/)

非受控组件使用场景小结:

  • 需要验证的情况下的提交
  • 需要取回一次性值的场景(比如提交)

一般简单表单使用非受控组件,复杂的则使用受控组件.


原文始发于微信公众号(迪哥讲事):React系列-非受控组件

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年5月30日01:23:34
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  React系列-非受控组件 http://cn-sec.com/archives/1065193.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: