React 基础学习笔记【三】

react表单

【小案例】用受控组件和非受控组件两种方式展示，检测用户表单输入和提交

受控组件

1.构造一个state，创建一条value为空

constructor(props) {
    super(props);
    this.state ={
        value:''
    }
}复制代码

2.创建form表单元素，内部input输入框，将用户输入的value和state中的value绑定

【注意】此时界面上的input框由于受state初始状态为空的影响，目前不能输入

render(){
    return(
        <form className="p-5" onSubmit={this.handleSubmit}>
            <div className="form-group">
                <label>留言内容</label>
                <input
                type="text"
                className="form-control"
                placeholder="请输入内容"
                onChange={this.handleChange}
                value={this.state.value}
                />
            </div>
            <button type="submit" className="btn btn-primary">留言</button>
        </form>
    )
}复制代码

3.给input表单添加onChange事件检测用户改变input输入框内容

onChange={this.handleChange}复制代码

4.定义handleChange表单检测事件方法，调用setState更新state状态，让state中的value

为用户输入的value，则用户现在输入的内容通过修改state可展示在界面上

handleChange(event){
    this.setState({
        value:event.target.value
    })
}复制代码

5.给form标签绑定监测用户提交事件

onSubmit={this.handleSubmit}复制代码

6.定义监测用户提交事件方法，阻止submit的默认提交事件，

此时用户点击提交按钮后，会弹出用户所输入的值

handleSubmit(event){
    alert(this.state.value)
    event.preventDefault()
}复制代码

非受控组件

1.创建form表单标签，input输入框，和submit提交按钮

2.给input标签绑定 ref={(textInput)=>{this.textInput = textInput}} 用来直接获取dom节点的值，此处将textInput的值赋给this.textInput，让外部能访问

3.给form标签绑定监测用户提交事件 onSubmit={this.handleSubmit}

render(){
    return(
        <form className="p-5" onSubmit={this.handleSubmit}>
            <div className="form-group">
                <label>留言内容</label>
                <input
                    type="text"
                    className="form-control"
                    placeholder="请输入内容"
                    ref={(textInput)=>{this.textInput = textInput}}
                />
            </div>
            <button type="submit" className="btn btn-primary">留言</button>
        </form>
    )
}复制代码

4.定义用户提交事件，直接使用监测表单输入的textInput值即可获取到用户value

handleSubmit(event){
    alert(this.textInput.value)
    event.preventDefault()
}复制代码

同时在state中将this转出给标签绑定事件处使用

constructor(props) {
    super(props);
    //让state中的this能够被handleSubmit外部函数访问
    this.handleSubmit = this.handleSubmit.bind(this)
}复制代码

状态提升单向数据流

【小案例】留言板

1.在评论区的组件中，我们需要将整个静态评论列表传给父组件

render(){
    return(
        <div className="commentlistcomp pl-5 pr-5 mt-5">
            <label>评论列表</label>
            <ul className="list-group contains">
                {
                  this.props.comments.map((comment,index)=>
                    <div key={index} className="rows p-2">
                        <li className="list-group-item mb-3 ml-3">{comment}</li>
                    </div>
                  )
                }
            </ul>
        </div>
    )
}复制代码

2.在父组件的评论区子标签中接收传来的评论

<CommentList comments={comments}/>复制代码

3.在上个监测用户表单输入的提交组件中，创建p标签，显示已有多少条评论

将数据commentsLength props给父组件，数据和逻辑在父组件中定义

<p>已有{this.props.commentsLength}条评论</p>复制代码

4.在上个监测用户表单输入的提交组件，的按钮提交事件中，定义onAddComment方法，并传给父组件，目的：将用户输入内容作为参数传出

handleSubmit(event){
    //alert(this.textInput.value)
    this.props.onAddComment(this.textInput.value)
    this.textInput.value = ''
    event.preventDefault()
}复制代码

5.在父组件的子标签中，接收刚子组件传来的评论数，和按钮事件携带函数的用户评论内容参数，

而评论数为数组中的length数

<CommentBox commentsLength={comments.length}
            onAddComment={this.addComment}
/>复制代码

6.在父组件里先定义留言板子组件的评论数组，并定义评论区一条内容

然后将提交事件this转出，以备定义事件时使用

constructor(props){
  super(props)
    this.state = {
      comments:['this is my first reply']
    }
    this.addComment = this.addComment.bind(this)
}复制代码

7.定义按钮提交评论事件函数，由旧的评论数加新的评论数组成

addComment(comment111){
  this.setState({
      //...旧的state.comments数组展开
      //最终comments数组是旧+新组成
      comments:[...this.state.comments,comment111]
  })
}复制代码

最终效果

单向数据流：自上而下的数据流，在react中，任何可被改变的数据都只有一个数据源；

和双向绑定的区别：缺点：需要写更多的代码，用回调函数的方式改变数据状态，

优点：很容易找bug

状态提升：数据都交给子组件最近的父组件内管理