React 表单处理 + 评论小案例

1.受控组件 ： 值受到 React 控制的表单元素

1. HTML 中表单元素时可输入的，也就是有自己的可变状态

2. React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改

3. React 希望将 state 与 表单元素 value 绑定到一起，由 state 的值来控制表单元素的值的

// 受控组件： 表单元素
export default class Form extends React.Component{
  state= {
    text: '0',
    content: '111',
    city: 'bj',
    isChecked:false
  }
  handleForm = (e) => {
    const target = e.target
    const name = target.name
    const value = target.type=== 'checkbox'?target.checked:target.value
    this.setState({
      [name]:value
    })
  }
  render() {
    <div>
      <input name='text' value={this.state.text} onChange={this.handleForm}></input>
      <textarea name='content' value={this.state.content} onChange={this.handleForm}></textarea>
      <select name='city' value={this.state.city} onChange={this.handleForm}>
        <option value='bj'>北京</option>
        <option value='sh'>上海</option>
        <option value='sz'>深圳</option>
      </select>
      <input type='checkbox' name='isChecked' checked={this.state.isChecked} onChange={this.handleForm}></input>
      
    </div>
  }
}

2.非受控组件 

  

1. 借助于 ref，使用原生 DOM 方式来获取表单元素值

2. ref 的作用：获取 DOM 和组件

3. 非受控组件使用步骤

   • 调用 React.createRef()方法创建一个 ref 对象

   • 将创建好的 ref 对象添加到文本框中

   • 通过 ref 对象获取到文本框的值

// 非受控组件 ： 表单元素
export default class Form extends React.Component{
  constructor() {
    super()
    this.state = {
      txt:'ooooo'
    }
    this.txtRef = React.createRef()
  }
  handleTxt = () => {
    console.log(this.txtRef.current.value);
  }
  render() {
    <div>
      <input name='text' ref={this.txtRef} onChange={this.handleTxt}></input>
    </div>
  }
}

评论小案例：

import React from 'react'
import ReactDOM from 'react-dom/client'
export default class Comment extends React.Component {
  state = {
    comment: [
      { id: 1, name: 'jack', content: '沙发！！！' },
      { id: 2, name: 'rose', content: '板凳~' },
      { id: 3, name: 'tom', content: '楼主好人' },
    ],
    userName: '',
    userComment: '',
  }
  handleCommentList() {
    const { comment } = this.state
    if (comment.length == 0) {
      return <div>暂无评论，快去评论吧~</div>
    }
    return (
      <ul>
        {comment.map((item) => (
          <li key={item.id}>
            <h3>评论人：{item.name}</h3>
            <p>评论内容：{item.content}</p>
          </li>
        ))}
      </ul>
    )
  }
  handleComment = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value,
    })
  }
  addComment() {
    const { userName, userComment, comment } = this.state
    if (userName.trim() == '' || userComment.trim() == '') {
      alert('评论人及评论内容不能为空')
      return
    }
    const newComment = [
      {
        id: Math.random(),
        name: userName,
        content: userComment,
      },
      ...comment,
    ]
    this.setState({
      comment: newComment,
      userName: '',
      userComment: '',
    })
  }
  render() {
    return (
      <div>
        <div>
          <input
            placeholder="请输入评论人"
            name="userName"
            value={this.state.userName}
            onChange={this.handleComment}
          ></input>
          <br />
          <textarea
            placeholder="请输入评论内容"
            name="userComment"
            value={this.state.userComment}
            onChange={this.handleComment}
          ></textarea>
          <button onClick={this.addComment}>评论</button>
        </div>

        {this.handleCommentList()}
      </div>
    )
  }
}
ReactDOM.render(Comment, document.getElementById('root'))