受控组件
假设我们现在有一个表单,表单中有一个input标签,input的value值必须是我们设置在constructor构造函数的state中的值,然后,通过onChange触发事件来改变state中保存的value值,这样形成一个循环的回路影响。也可以说是React负责渲染表单的组件仍然控制用户后续输入时所发生的变化
class Combox extends React.Component {
constructor() {
super()
this.state={
user:'',
text:''
}
}
//通过onChange触发事件来改变state中保存的value值
inputChange=(e)=>{
const key=e.currentTarget.id
this.setState({
[key]:e.currentTarget.value
})
}
render(){
return(
<div>
<div>
<label htmlFor="user">评论人:</label>
//input的value值必须是我们设置在constructor构造函数的state中的值
<input id='user' value={this.state.user} onChange={this.inputChange}></input>
</div>
<div>
<label htmlFor="text">评论内容:</label>
//input的value值必须是我们设置在constructor构造函数的state中的值
<input id='text' value={this.state.text} onChange={this.inputChange}></input>
</div>
<button onClick={()=>this.listChange()}>提交</button>
</div>
)
}
}
非受控组件:通过创建一个ref引用,表单数据交给dom来处理
class Combox extends React.Component {
constructor() {
super()
this.state={
user:'',
text:''
}
//第一步:创建ref引用
this.userValue=React.createRef()
this.textValue=React.createRef()
}
//提交更新数据
listChange=()=>{
if(this.userValue.current.value&&this.textValue.current.value){
this.props.updateList({//updateList()和本题无关
/第三步:使用,可以引用赋值了
name:this.userValue.current.value,
text:this.textValue.current.value
})
this.userValue.current.value=this.textValue.current.value=''
}
}
render(){
return(
<div>
<div>
<label htmlFor="user">评论人:</label>
//第二部:使用创建好得ref
<input id='user' ref={this.userValue}></input>
</div>
<div>
<label htmlFor="text">评论内容:</label>
<input id='text' ref={this.textValue}></input>
</div>
<button onClick={()=>this.listChange()}>提交</button>
</div>
)
}
}