1. 非受控组件
React 要编写一个非受控组件，可以使用ref 来从DOM节点中获取表单数据，就是非受控组件。例如下面的代码使用非受控组件接受一个表单的值:
import React, { Component } from 'react'
export default class App extends Component {
myusername=React.createRef()
render() {
return (
<div>
{/* 非受控写法 */}
<h1>登录页</h1>
<input type="text" ref={this.myusername} defaultValue="huanhuan"/>
<button onClick={()=>{console.log(this.myusername.current.value)}}>登录</button>
<button onClick={()=>{console.log(this.myusername.current.value="")}}>Reset</button>
</div>
)
}
}
2. 受控组件
在HTML中，标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。
import React, { Component } from 'react'
import Child from './components/Child'
export default class App extends Component {
myusername = React.createRef()
state = {
username: 'kerwin'
}
render() {
return (
<div>
{/* 受控写法 只需要通过控制 this.state 传值方式即可 */}
<h1>登录页</h1>
<input type="text" ref={this.myusername} value={this.state.username}
onChange={(event) =>
{
console.log(event.target.value);
this.setState({
username:event.target.value
})
}
}/>
<button onClick={() => { console.log(this.state.username); }}>登录</button>
<button onClick={() => {
// console.log(this.myusername.current.value = "")
this.setState({
username:""
})
}}>Reset</button>
{/* 子组件也可以通过传值方式 */}
<Child myvalue={this.state.username}></Child>
</div>
)
}
}
3. 受控组件案例 列表查询
import React, { Component } from 'react'
export default class Cinema extends Component {
constructor() {
super()
this.state = {
cinemalist: [{ cinameId: 1, name: "水晶草", address: "北京市朝阳区西大望路蓝堡国际中心1座2101" },
{ cinameId: 2, name: "李晓艺", address: "北京市通州区西大望路蓝堡国际中心1座2106" },
{ cinameId: 3, name: "李乐乐", address: "北京市朝阳区西大望路蓝堡国际中心1座2106" },
{ cinameId: 4, name: "李佳佳", address: "北京市朝阳区西大望路蓝堡国际中心1座2106" }],
mytext:""
}
}
//后面讲的声明周期函数 更适合发送ajax
render() {
return (
<div>
<input type="text" value={this.state.mytext} onChange={(evt) => {
this.setState({
mytext:evt.target.value
})
}} />
{
this.getCinemalist().map((item) =>
<dl key={item.cinameId}>
<dt>{item.name}</dt>
<dd>{item.address}</dd>
</dl>
)
}
</div>
)
}
getCinemalist() {
let mytext = this.state.mytext.toUpperCase()
return this.state.cinemalist.filter(item => item.name.toUpperCase().includes(mytext) || item.address.toUpperCase().includes(mytext))
}
}
// filter
//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
4. 受控组件案例 list增加和删除
import React, { Component } from 'react'
export default class app extends Component {
a = 100;
myref = React.createRef()
state = {
list:[{
id: "1",
mytext: "春天来了",
isChecked:false
},{
id: "2",
mytext: "冬天走了，春天还远吗",
isChecked:false
},{
id: "3",
mytext: "春天来了，夏天还远吗",
isChecked:true
}],
mytext:""
};
render() {
var newList= this.state.list.map((item,index) => <li key={index}>{item.key}</li> )
return (
<div>
<input ref={this.myref} value={this.state.mytext} onChange={(event) => { this.setState({ mytext: event.target.value }) } } />
<button onClick={this.handleClick2}>add2</button>
<ul>
{
this.state.list.map((item,index)=>
<li key={item.id}>
<input type="checkbox" checked={item.isChecked} onChange={() =>
this.handleChange(index)} />
<span style={{textDecoration:item.isChecked?"line-through":""}} dangerouslySetInnerHTML={{__html: item.mytext}}></span>
<input onClick={()=>this.handleDelClick(index)} type="button" value="del" />
</li>
)
}
</ul>
<div className={this.state.list.length === 0?'':'hidden'}> 待办事项暂无！</div>
</div>
)
}
handleChange = (index) => {
console.log(index)
let newlist = [...this.state.list]
newlist[index].isChecked = !newlist[index].isChecked
this.setState({
list:newlist
})
}
handleClick2 = () => {
this.state.list.push({ "mytext": this.myref.current.value,id:Math.random()*111111})
this.setState({list:this.state.list})
}
handleDelClick = (id) => {
console.log("click2", id)
let newlist = this.state.list.concat() //拷贝一个数组 slice(0) [...arr] Array.from(arr) Object.assign([],arr);
newlist.splice(id, 1)
this.setState({list:newlist})
}
}
