在 HTML 中,表单元素如 , 和 表单元素通常保持自己的状态,并根据用户输入进行更新。而在 React 中,可变状态一般保存在组件的 state(状态) 属性中,并且只能通过 setState() 更新
我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式,其值由 React 控制的输入表单元素称为“受控组件”
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
constructor(props) {
super(props)
//绑定函数
this.handleInputChange = this.handleInputChange.bind(this);
this.handleTextareaChange = this.handleTextareaChange.bind(this);
//状态值
this.state = {
inputValue:'',
textareaValue:''
}
}
//设置inputValue
handleInputChange(e){
this.setState({
inputValue:e.target.value
});
}
//设置textareaValue
handleTextareaChange(e){
this.setState({
textareaValue:e.target.value
})
}
render(){
const {inputValue,textareaValue} = this.state;
return (
<div>
<p>单行输入框:<input type="text" value={inputValue}
onChange={this.handleInputChange}
/></p>
<p>多行输入框:<textarea value={textareaValue} onChange={this.handleTextareaChange}/></p>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
)