1.受控组件的基本使用
在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。 而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
我们将两者结合起来，使React的state成为“唯一数据源”； p 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；
被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”；
import React, { PureComponent } from 'react';
class App extends PureComponent {
constructor(props) {
super(props)
this.state = {
username: ""
}
}
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
{/* 这个就是一个受控组件 */}
用户:<input
type="text"
id="username"
onChange={e => this.handleChange(e)}
value={this.state.username}
/>
</label>
<input type="submit" value="提交" />
</form>
</div>
);
}
// 阻止表单的默认提交事件
handleSubmit(e) {
console.log(e)
e.preventDefault() // 取消默认提交
}
handleChange(e) {
console.log(e.target.value)
this.setState({
username: e.target.value
})
}
}
export default App;
实际截图:
image.png
受控组件-多个输入的情况
import React, { PureComponent } from 'react';
class App extends PureComponent {
constructor(props) {
super(props)
this.state = {
username: "",
password: "",
valid: ""
}
}
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
用户: <input
type="text"
id="username"
onChange={e => this.handleUsernameChange(e)}
value={this.state.username}
/>
</label><br />
<label htmlFor="password">
密码: <input
type="text"
id="password"
onChange={e => this.handlePasswordChange(e)}
value={this.state.password}
/>
</label><br />
<label htmlFor="valid">
验证: <input
type="text"
id="valid"
onChange={e => this.handleValidChange(e)}
value={this.state.valid}
/>
</label>
<input type="submit" value="提交" />
</form>
/**这个是原始获取 Start**/
handleSubmit(e) {
e.preventDefault()
const { username, password, valid } = this.state
console.log(username, password, valid);
}
handleUsernameChange(e) {
this.setState({
username: e.target.value
})
}
handlePasswordChange(e) {
this.setState({
password: e.target.value
})
}
handleValidChange(e) {
this.setState({
valid: e.target.value
})
}
/**这个是原始获取 End**/
}
export default App;
优化代码:
<div style={{ marginTop: '100px' }}></div>
{/* 以下是优化的代码 */}
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
用户: <input
type="text"
id="username"
name="username"
onChange={e => this.HandelChange(e)}
value={this.state.username}
/>
</label><br />
<label htmlFor="password">
密码: <input
type="text"
id="password"
name="password"
onChange={e => this.HandelChange(e)}
value={this.state.password}
/>
</label><br />
<label htmlFor="valid">
验证: <input
type="text"
id="valid"
name="valid"
onChange={e => this.HandelChange(e)}
value={this.state.valid}
/>
</label>
<input type="submit" value="提交" />
</form>
</div>
);
}
/**以下是优化的**/
HandelChange(event) {
console.log(event.target.name)
this.setState({
// 这个地方设置一个动态的key
[event.target.name]: event.target.value
})
}
或者:
HandelChange(e) {
console.log(e.target);
console.log(e.target.name);
const name = e.target.name
this.setState({
[name]: e.target.value,
});
}
实际截图:
image.png
非受控组件
import React, { PureComponent,createRef } from 'react';
// 非受控组件里面的数据 不在是由我们的this.state来控制了 而是你用 ref取值的形式来处理了
class App extends PureComponent {
constructor(props) {
super(props)
this.usernameRef = createRef()
}
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
用户:
<input type="text" id="username" ref={this.usernameRef} />
</label>
<input type="submit" value="提交"/>
</form>
</div>
);
}
handleSubmit(e) {
e.preventDefault()
console.log(this.usernameRef.current.value);
}
}
export default App;
image.png
