react可控组件和不可控组件
发布时间：2022-09-18 12:56:15 728 相关标签： # 数据# 监控# 信息
在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到state的React组件就是可控组件，反之则是不可控组件。
先看一个不可控的input代码
不可控的input无法改变值，不管你怎么敲击键盘输入，input中的数值不会发生任何改变，打开控制台会有一个报错信息，
原因是：
因为input标签，没有定义onChange 但是提供了value属性。React会抛出警告，并将元素设置为只读。
如果目标是只读字段，最好使用readOnly属性明确加以定义。这不仅会消除警告，也会确保代码的可读性。
解决：
可以添加readOnly={true} ，或者直接添加readOnly属性，而不设置值，React会默认将该属性的值设为true。
一。设置onchang，变成可控input
(1)直接在函数后面.bind(this)
//测试效果用
import React, { Component } from 'react';
class MyForm extends Component {
constructor(props) {
//super指代父类的实例（即父类的this对象）
super(props);
this.state = {
username: '',
gender: 'man',
checked: true,
value: 'ferrysoul'
};
}
getInitialState(){
return { value: 'ferrysoul' }
};
handleChange(event) {
console.log(event.target.value)
this.setState({ value: event.target.value });
console.log(this.state.value)
};
render() {
return (
)
}
}
export default MyForm;
(2.)在constructor中绑定this，在render中调用的时候就不需要bind了，直接 this.函数名
//测试效果用
import React, { Component } from 'react';
class MyForm extends Component {
constructor(props) {
//super指代父类的实例（即父类的this对象）
super(props);
this.state = {
username: '',
gender: 'man',
checked: true,
value: 'ferrysoul'
};
this.handleChange = this.handleChange.bind(this);
}
getInitialState(){
return { value: 'ferrysoul' }
};
handleChange(event) {
console.log(event.target.value)
this.setState({ value: event.target.value });
console.log(this.state.value)
};
render() {
return (
)
}
}
export default MyForm;
(3).直接使用箭头函数：这种适用于函数块代码比较少的情况
//测试效果用
import React, { Component } from 'react';
class MyForm extends Component {
constructor(props) {
//super指代父类的实例（即父类的this对象）
super(props);
this.state = {
username: '',
gender: 'man',
checked: true,
value: 'ferrysoul'
};
}
getInitialState(){
return { value: 'ferrysoul' }
};
// handleChange(event) {
// console.log(event.target.value)
// this.setState({ value: event.target.value });
// console.log(this.state.value)
// };
render() {
return (
{ this.setState({ value: event.target.value });}} />
显示你的value如下:
{this.state.value}
)
}
}
export default MyForm;
二。依旧是不可控input，但是没有报错的问题了
//测试效果用
import React, { Component } from 'react';
class MyForm extends Component {
constructor(props) {
//super指代父类的实例（即父类的this对象）
super(props);
this.state = {
username: '',
gender: 'man',
checked: true,
value: 'ferrysoul'
};
}
getInitialState(){
return { value: 'ferrysoul' }
};
render() {
return (
)
}
}
export default MyForm;
----------------------------------------------------------------------------------------------------------
在input标签中不把value绑定到state上的就是不可控组件，它的数据不合state对应，所以在开发时会给自己挖很多坑，但是不可控组件并不是不可掌控，就用一节课的时间，我们了解一下不可控组件的小技巧。
组件完成之后给它加上一个onChange事件，发现是可以监控到变化值的。如果要获得iput中的value值，需先拿到其DOM节点，然后获取其value值。
//测试效果用
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class MyForm extends Component {
constructor(props) {
//super指代父类的实例（即父类的this对象）
super(props);
this.state = {
username: '',
gender: 'man',
checked: true,
value: 'ferrysoul'
};
this.handleChange = this.handleChange.bind(this);
}
getInitialState(){
return { value: 'ferrysoul' }
};
handleChange(event) {
var inputValue = ReactDOM.findDOMNode(this.refs.ferrysoul).value;
console.log(inputValue);
this.setState({ value: event.target.value });
};
render() {
return (
)
}
}
export default MyForm;
文章来源： https://blog.51cto.com/u_14187652/5672606
特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。
举报
