react - 条件渲染，列表渲染，表单绑定，状态提升

于 2023-02-11 11:01:09 发布
阅读量544 收藏
点赞数
分类专栏： react 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57135131/article/details/128981381
版权
本文介绍了React中条件渲染的几种方式，包括使用&&、三元运算符以及动态className和style。接着讲解了列表渲染的最佳实践，强调了key的重要性。在表单绑定部分，阐述了受控组件的概念和使用。最后，探讨了状态提升，即如何在父子组件间共享状态，以及在同级组件间通过父组件进行状态提升的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

九、条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

9.1 &&

你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

import App from './04_condition/01_App_condition_yu' // 条件判断与

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/01_App_condition_yu.jsx

// src/04_condition/01_App_condition_yu.jsx
import React, { Component } from 'react';

class MailBox extends Component {
  render () {
    return (
      <div>
        { 
          this.props.unReadMessage.length > 0 && <div>还有{this.props.unReadMessage.length}未读邮件</div>
        }
      </div>
    )
  }
}
export default class App extends Component {
  state = {
    messageList: ['a', 'b', 'c', 'd']
  }
  render() {
    return (
      <div>
        {
          // 如果messageList从服务器获取， 初始数据为空数组，其实没有必要 map 遍历
          this.state.messageList && this.state.messageList.map((item, index) => {
            return (
              <p key={ index }>
                { item }
                <button onClick={
                  () => {
                    // 获取数据
                    const arr = this.state.messageList
                    // 处理数据
                    arr.splice(index, 1)
                    // 修改状态
                    this.setState({
                      messageList: arr
                    })
                  }
                }>阅读</button>
              </p>
            )
          })
        }
        <MailBox unReadMessage = { this.state.messageList }/>
      </div>
    );
  }
}

9.2 三元运算符

条件渲染的另一种方法是使用 JavaScript 的条件运算符:

condition ? true : false。

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/02_App_condition_san.jsx

// src/04_condition/02_App_condition_san.jsx
// 在jsx 中不要使用  if 以及 for 等流程控制语句
// 可以在 if 条件语句中  返回 jsx代码
import React, { Component } from 'react';

export default class App extends Component {

  state = {
    loginState: false
  }

  // 1.三元运算符
  // render () {
  //   return (
  //     <div>
  //       { this.state.loginState ? '登录了' : '未登录' }
  //       <button onClick={ () => {
  //         this.setState({
  //           loginState: !this.state.loginState
  //         })
  //       }}>切换</button>
  //     </div>
  //   )
  // }


  // render () {
  //   if (this.state.loginState) {
  //     return (
  //       <div>
  //         登录了
  //         <button onClick={ () => {
  //           this.setState({
  //             loginState: !this.state.loginState
  //           })
  //         }}>切换</button>
  //       </div>
  //     )
  //   } else {
  //     return (
  //       <div>
  //         未登录
  //         <button onClick={ () => {
  //           this.setState({
  //             loginState: !this.state.loginState
  //           })
  //         }}>切换</button>
  //       </div>
  //     )
  //   }
  // }

  render () {
    const HTML = <button onClick={ () => {
      this.setState({
        loginState: !this.state.loginState
      })
    }}>切换</button>
    if (this.state.loginState) {
      return (
        <div>
          登录了 { HTML }
        </div>
      )
    } else {
      return (
        <div>
          未登录 { HTML }
        </div>
      )
    }
  }
}

9.3 动态className

Vue中有很方便的动态绑定class属性的方式，v-bind:class,那么react怎么实现这样的效果呢？

<button class="btn btn-success btn-sm"></button>

<button class="btn btn-danger btn-sm"></button>

<button class="btn btn-warning btn-sm"></button>

{ this.state.type === 'success' ? 'btn btn-success btn-sm' : 'btn btn-sm'}

通过classnames这个插件可以实现

$ cnpm i classnames -S

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
import App from './04_condition/03_App_condition_classname' // 条件判断 样式

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/03_App_condition_classname.jsx

// src/04_condition/03_App_condition_classname.jsx
import React, { Component } from 'react'
import classnames from 'classnames'
export default class App extends Component {
  state = {
    type: 'default', // success danger warning default
    size: 'md' // sm  md  lg  (小 中 大)
  }
  render() {
    return (
      <div>
        <button onClick={ () => this.setState({ type: 'success' })}>success</button>
        <button onClick={ () => this.setState({ type: 'danger' })}>danger</button>
        <button onClick={ () => this.setState({ type: 'warning' })}>warning</button>
        <button onClick={ () => this.setState({ type: 'default' })}>default</button>
        <button onClick={ () => this.setState({ size: 'sm' })}>sm</button>
        <button onClick={ () => this.setState({ size: 'md' })}>md</button>
        <button onClick={ () => this.setState({ size: 'lg' })}>lg</button>
        <button className={ 
          classnames({
            btn: true,
            'btn-success': this.state.type === 'success',
            'btn-sm': this.state.size === 'sm' 
          })
         }>success小号按钮</button>

        <button className={ (this.state.type === 'success' && this.state.size === 'sm') ? 'btn btn-success btn-sm' : (this.state.type === 'success' && this.state.size !== 'sm') ? 'btn btn-success' : (this.state.type !== 'success' && this.state.size === 'sm') ? 'btn btn-sm' : 'btn'}>success小号按钮</button>
      </div>
    )
  }
}

补充：

  • css-in-js

    $ cnpm i styled-components -S

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
// import App from './04_condition/03_App_condition_classname' // 条件判断 样式
import App from './04_condition/04_App_condition_cssinjs' // css in js

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/04_App_condition_cssinjs.jsx

// src/04_condition/04_App_condition_cssinjs.jsx
import styled from 'styled-components'
import React, { Component } from 'react';

// css in js
const Button = styled.button`
  padding: 30px;
  font-size: 20px;
`
export default class App extends Component {
  render() {
    return (
      <div>
        <Button>按钮</Button>
      </div>
    );
  }
}
  • 模块化css

可以解决类似于 vue中 scoped

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
// import App from './04_condition/03_App_condition_classname' // 条件判断 样式
// import App from './04_condition/04_App_condition_cssinjs' // css in js
import App from './04_condition/05_App_module_css' // 模块化css

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/05_App_module_css.jsx

// src/04_condition/05_App_module_css.jsx
import './style.css'
// 模块化css
import style from './style.module.css'
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      // <div className="container">
      //   <header className="header"></header>
      //   <div className="content"></div>
      //   <footer className="footer"></footer>
      // </div>
      <div className={ style.container }>
        <header className={ style.header}></header>
        <div className={ style.content}></div>
        <footer className={ style.footer}></footer>
      </div>
    );
  }
}

src/04_condition/style.module.css

* {padding: 0; margin: 0;}
html, body{ height: 100%;}
#root { height: 1000px;}
.container {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
}

.header {
  height: 100px;
  background-color: #f66;
}
.content {
  flex: 1;
}
.footer {
  height: 100px;
  background-color: #ccc;
}

9.4 动态style

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
// import App from './04_condition/03_App_condition_classname' // 条件判断 样式
// import App from './04_condition/04_App_condition_cssinjs' // css in js
// import App from './04_condition/05_App_module_css' // 模块化css
import App from './04_condition/06_App_style' // 动态style

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/06_App_style.jsx

// src/04_condition/06_App_style.jsx
import React, { Component } from 'react'
// style 小驼峰式 单位可省略
export default class App extends Component {
  state = {
    size: 12,
    color: '#000'
  }
  render() {
    // <></> 空标签
    return (
      <>
        <input type="color" value={ this.state.color } onChange = { event => this.setState({ color: event.target.value })} />
        <button onClick={ () => this.setState({ size: this.state.size + 2 })}>加</button>
        <button onClick={ () => this.setState({ size: this.state.size - 2 })}>减</button>
        <div style={ { fontSize: this.state.size + 'px', color: this.state.color } }>
          自从去年中国决定逐渐放松防疫限制之后，中国疫情成为全球关注的焦点，引起诸多外国媒体的好奇。近日，《纽约时报》发布报道称：“早有预见中国的新冠清零会结束，但是从来没有想过会以这样的方式结束。”
        </div>
      </>

    )
  }
}

十、列表渲染

  • map()方法、key

使用 map() 方法遍历数组

组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思就是需要包含 key：

Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的 key

当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key

如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
import App from './05_list/01_App_map'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/05_list/01_App_map.jsx

// src/05_list/01_App_map.jsx
// React中使用 map 来遍历数据，需要 添加唯一值key

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    list: ['aa', 'bb', 'cc', 'dd']
  }
  // 边遍历边渲染
  // render() {
  //   return (
  //     <div>
  //       {
  //         this.state.list && this.state.list.map((item, index) => {
  //           return (
  //             <div key = { index }>{ item }</div>
  //           )
  //         })
  //       }
  //     </div>
  //   )
  // }

  // 先遍历后渲染
  render () {
    const arr = []
    this.state.list.forEach((item, index) => {
      arr.push(<div key = { index }>{ item }</div>)
    })

    return (
      <div>
        { arr }
      </div>
    )
  }
}

接口 http://121.89.205.189:3000/api/city/sortCity

实现多层遍历

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './05_list/01_App_map'
import App from './05_list/02_App_mutiple_map'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/05_list/02_App_mutiple_map.jsx

// src/05_list/02_App_mutiple_map.jsx
// React中使用 map 来遍历数据，需要 添加唯一值key

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    list: ['aa', 'bb', 'cc', 'dd'],
    newList: [
      {
        brand: '宝马',
        data: ['X5', 'X7']
      },
      {
        brand: '奥迪',
        data: ['Q3', 'RS7']
      }
    ]
  }
  // 边遍历边渲染
  // render() {
  //   return (
  //     <div>
  //       {
  //         this.state.list && this.state.list.map((item, index) => {
  //           return (
  //             <div key = { index }>{ item }</div>
  //           )
  //         })
  //       }

  //       {
  //         this.state.newList && this.state.newList.map(item => {
  //           return (
  //             <div key = { item.brand }>
  //               {
  //                 item.brand 
  //               }
  //               {
  //                 item.data.map((itm, idx) => {
  //                   return <p key = { idx }> { itm }</p>
  //                 })
  //               }
  //             </div>
  //           )
  //         })
  //       }
  //     </div>
  //   )
  // }

  // 先遍历后渲染
  render () {
    const arr = []
    this.state.list.forEach((item, index) => {
      arr.push(<div key = { index }>{ item }</div>)
    })

    const newArr = []
    this.state.newList.forEach(item => {
      const newData = []
      item.data.forEach((itm,idx) => {
        newData.push(<p key = { idx }>{ itm }</p>)
      })
      newArr.push(<div key = { item.brand }>{ item.brand } - { newData }</div>)
    })
    return (
      <div>
        { arr }
        { newArr }
      </div>
    )
  }
}

十一、表单绑定

在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称：

<form>
  <label>
    名字:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="提交" />
</form>

此表单具有默认的 HTML 表单行为，即在用户提交表单后浏览到新页面。如果你在 React 中执行相同的代码，它依然有效。但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。

表单元素的value值受 state的控制

11.1 各种表单的绑定与取值

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
import App from './06_form/01_App_form'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/06_form/01_App_form.jsx

// src/06_form/01_App_form.jsx

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    userName: '',
    password: '',
    sex: '',
    hobby: [],
    lesson: '',
    note: '',
    flag: false
  }

  changeVal (event) {
    console.log(event)
    // this.setState({
    //   userName: event.target.value
    // })
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  handlerHobbyChange (event) {
    console.log(event.target.checked)
    const checked = event.target.checked
    const value = event.target.value
    const arr = this.state.hobby
    if (checked) {
      arr.push(value)
    } else {
      const index = arr.findIndex((item) => {
        return item === value
      })
      arr.splice(index, 1)
    }
    console.log('22', arr)
    this.setState({
      hobby: arr
    })
  }
  render() {
    return (
      <div>
        <div>
          <input type="text" name="userName"  value = { this.state.userName } onChange = { this.changeVal.bind(this) }/>
          { this.state.userName }
        </div>
        <div>
          <input type="password" name="password"  value = { this.state.password } onChange = { this.changeVal.bind(this) }/>
          { this.state.password }
        </div>
        <div>
          <input type="radio" name="sex"  value = '男' onChange={ this.changeVal.bind(this) }/>男
          <input type="radio" name="sex"  value = '女' onChange={ this.changeVal.bind(this) }/>女
           ---- { this.state.sex }
        </div>
        <div>
          <input type="checkbox" name="hobby" value="🏀" onChange={ this.handlerHobbyChange.bind(this) }/>🏀
          <input type="checkbox" name="hobby" value="⚽" onChange={ this.handlerHobbyChange.bind(this) }/>⚽
          <input type="checkbox" name="hobby" value="🏐" onChange={ this.handlerHobbyChange.bind(this) }/>🏐
          <input type="checkbox" name="hobby" value="🏓" onChange={ this.handlerHobbyChange.bind(this) }/>🏓 
          --- 
          { 
            this.state.hobby && this.state.hobby.map(item => {
              return <span key = { item }>{item}</span>
            }) 
          }
        </div>
        <div>
          <select name="lesson" value = { this.state.lesson } onChange = { this.changeVal.bind(this) }>
            <option value="一阶段">一阶段</option>
            <option value="二阶段">二阶段</option>
            <option value="三阶段">三阶段</option>
          </select>
           ---- { this.state.lesson }
        </div>
        <div >
          <textarea name="note" value={this.state.note} onChange = { this.changeVal.bind(this) }/>{ this.state.note }
        </div>
        <div >
          <input type="checkbox" name="flag" value={ this.state.flag } onChange= { (event) => {
            this.setState({
              flag: event.target.checked
            })
          }} /> 同意 **** 协议 { this.state.flag }
        </div>
        <button onClick={() => {
          console.log({
            userName: this.state.userName,
            password: this.state.password,
            sex: this.state.sex,
            hobby: this.state.hobby,
            lesson: this.state.lesson,
            note: this.state.note,
            flag: this.state.flag
          })
        }}>获取数据</button>
      </div>
    );
  }
}

11.2 受控表单以及受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

input、textarea、select 受控组件： value的属性受了 state 的控制

  • 使用了受控组件，一定要写 value 属性以及onChange事件

radio、‘checkbox’ 受控组件: checked 的属性受了state的控制

如果需要设置默认值，那么需要通过 defaultValue 以及defaultChecked设置

案例如上

十二、状态提升

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。

12.1 父子组件通信

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
import App from './07_state_up/01_App-parent-child-value'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/07_state_up/01_App-parent-child-value.jsx

// src/07_state_up/07_state_up/01_App-parent-child-value.jsx
import React, { Component } from 'react'

class Child1 extends Component {
  state = { count: 1 }
  render () {
    return (
      <>
        <h1>child1组件</h1>
        { this.state.count }
        <button onClick={ () => { this.setState({count: this.state.count + 1} ) }}>加1</button>
      </>
    )
  }
}
class Child2 extends Component {
  state = { count: 1 }
  render () {
    return (
      <>
        <h1>child2组件</h1>
        { this.state.count }
        <button onClick={ () => { this.setState({count: this.state.count + 1} ) }}>加1</button>
      </>
    )
  }
}
class App extends Component {
  render() {
    return (
      <div>
        <Child1 ></Child1>
        <hr></hr>
        <Child2 ></Child2>
      </div>
    );
  }
}

export default App;

我们发现Child1和Child2都是两个独立的个体，并没有实现数据共享

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './07_state_up/01_App-parent-child-value'
import App from './07_state_up/02_App_state_up'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/07_state_up/02_App_state_up.jsx

// src/07_state_up/07_state_up/02_App_state_up.jsx
import React, { Component } from 'react'

class Child1 extends Component {
  // state = { count: 1 }
  render () {
    return (
      <>
        <h1>child1组件</h1>
        { this.props.count }
        <button onClick={ () => { this.props.onClick() }}>加1</button>
      </>
    )
  }
}
class Child2 extends Component {
  // state = { count: 1 }
  render () {
    return (
      <>
        <h1>child2组件</h1>
        { this.props.count }
        <button onClick={ () => { this.props.onClick() }}>加1</button>
      </>
    )
  }
}
class App extends Component {
  state = {
    count: 1
  }
  add = () => {
    this.setState({ count: this.state.count + 1 })
  }
  render() {
    return (
      <div>
        <Child1 count = { this.state.count } onClick = { this.add }></Child1>
        <hr></hr>
        <Child2 count = { this.state.count } onClick = { this.add }></Child2>
      </div>
    );
  }
}

export default App;

12.2 状态提升解读

实现方式是 利用最近的共同的父级组件中，用props的方式传过去到两个子组件，props中传的是一个setState的方法，通过子组件触发props传过去的方法，进而调用父级组件的setState的方法，改变了父级组件的state，调用父级组件的add方法，进而同时改变了两个子级组件的数据。

这是 两个有关连的同级组件的传值，因为react的单项数据流，所以不在两个组件中进行传值，而是提升到 最近的共同的父级组件中，改变父级的state,进而影响了两个子级组件的render。

注意如果两个组件是同级组件（这两个组件的父组件是同一个）才考虑状态提升共享数据

react——渲染列表
2301_82143894的博客
03-24 1033
React 提供了高效的方式来实现这一点，通过 JavaScript 的数组操作结合 JSX，可以将数据转换为可渲染的组件或元素。没有 key，React 可能会错误地认为第二个 <li> 的内容从 "Garlic" 变成了 "Apple"，导致不必要的 DOM 操作。比如，删除 id: 2 的 "Garlic"，React 知道只移除对应的 <li key="2">，而不会重新渲染整个列表。map() 是 JavaScript 数组的一个内置方法，它遍历数组的每个元素，并根据提供的函数返回一个新数组。
React条件渲染&&列表渲染
zep
11-01 2281
一、React条件渲染 某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容： 在vue中，我们会通过指令来控制：比如v-if、v-show； 在React中，所有的条件判断都和普通的JavaScript代码一致； 常见的条件渲染的方式有哪些呢？ 方式一：条件判断语句 适合逻辑较多的情况 方式二：三元运算符 适合逻辑比较简单 方式三：与运算符&& 适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染； 方式四：v-sho
React学习笔记(四) 条件渲染与列表渲染
半虹小站
08-07 695
我们可以通过创建不同的组件封装不同的行为，然后根据应用的状态渲染对应状态下的部分内容
React中的列表渲染
人间真的不值得的博客
02-17 2277
React中的列表渲染 Vue.js中使用v-for 实现模板中的列表项循环渲染； 小程序中使用 wx:for 实现模板中的列表项循环渲染； React中没有模板（即不需要v-for），也没有指令系统（即没有提供类似的机制）。 方法1:for循环遍历 import React, { Component } from 'react' export default class App extends Component { // 假设服务器端返回如下 state={books:['巴黎圣母院','悲惨世界
react
weixin_41069726的博客
06-07 209
基础库 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">&l...
react-ReactHooks绑定到FinalForm的基于订阅的高性能表单状态管理引擎
08-15
本文将深入探讨如何利用React Hooks绑定到FinalForm，构建一个基于订阅的高性能表单状态管理引擎。 FinalForm是一个强大的表单状态管理库，它允许你在React组件之间分离表单逻辑和视图。它的核心特性包括： 1. **...
react-json-form-engine:从JSON构建闪电般的快速Web表单
04-29
虽然其他库可能会使用 ， 或进行表单状态管理，但react-json-form-engine尽可能少地依赖React，并将其核心逻辑卸载到纯JavaScript上，同时利用绑定进行渲染。 结果是可扩展的，闪电般的性能以及对React生命周期的...
1-4、React中form表单下的input框初使用以及列表渲染
01-20
【标题】: "1-4、React中form表单下的input框初使用以及列表渲染" 【描述】: "本文档是React系列教程的一部分，涵盖了React环境的搭建、JSX语法、属性绑定、事件处理等内容。文章通过一个小项目，展示了如何在React...
react-form:用于表单验证的react组件
05-04
例如，利用JavaScript的ES6语法，可以编写简洁的箭头函数作为验证规则，使用Promise处理异步验证，以及使用模板字符串来动态渲染表单错误信息。 在使用React Form时，通常需要安装`react-form`库，然后在项目中引入...
react-Formalreacthooks时代的优雅跨平台表单管理原语primitives
08-15
- `react-Formal`利用React Hooks如`useState`和`useEffect`，使开发者能够更简单地管理表单的状态和生命周期。这使得无需手动绑定事件处理函数，也无需在类组件中使用`this`关键字。 2. **优雅的API设计** - 库...
React基础-JSX语法列表渲染详解
m0_71485750的博客
09-21 9075
比如截取数组中的一部分内容:slice函数, 例如上面代码中, 要求截取数组的前两条进行展示。但是React中的JSX正是因为和JavaScript无缝的衔接，让它可以更加的灵活;很多从Vue转型到React的小伙伴非常不习惯，认为Vue的方式更加的简洁明了;上面的操作先过滤, 再截取, 最后进行遍历, 其实可以通过链式调用一行代码完成。在React中，展示列表最多的方式就是使用数组的。比如好友消息、动态、联系人列表的数据;比如歌曲、歌手、排行榜列表的数据;比如商品、购物车、评论列表的数据;
react中表格的数据渲染
进一步，有一步的欢喜。
05-14 5821
数据列表渲染 数据列表处理使我们常见的事物类型，到后台给你一串数据列表，你将如何展示在前端页面上呢，传统的我们都是通过循环来实现，那么在react里面我们又是怎样实现的呢？ 数据如下 const books = [ { bookname: '1', time: '一号',}, { bookname: '2', time: '二号'}, {...
react把表格渲染好ui_使用reactjs渲染表格
weixin_35215045的博客
12-30 162
Hi Im starting with the reactjs. After working with the basics in react, Im trying to work on the reactjs with dynamoDB. First query Im working on is Select query, and render the table in html file. S...
react入门-列表渲染
love_521_的博客
03-23 1535
react列表渲染并添加了点击事件demo01 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"
react列表渲染
rolinabc的博客
07-18 263
1.react中的列表渲染 注意使用以下代码的话，注意包的导入路径 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js">&lt...
React-列表渲染
weixin_43760969的博客
12-02 552
React并没有Vue的v-for这种列表渲染方式 使用for进行列表渲染 import React from 'react' import ReactDOM from 'react-dom' // 列表渲染 class Test extends React.Component { constructor (props) { super(props) this.state = { list: [ {
react 列表渲染
qq_45316181的博客
07-23 332
列表渲染 1、 在实际应用中 数据展示 是最基本的功能。React中使用的map（）进行列表的渲染 Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此要给数组中的每一个元素赋予一个确定的标识。一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串 <script type="text/babel"> let list=["射手","辅助","上单"]; let list1=["寒冰","锤石","鳄鱼"];
React.js——列表渲染
五柳
07-11 411
前言 同样是列表渲染，React.js个人认为略显笨拙…相比较Vue.js，可能不会太友好，但是确实ES6的语法写起来很爽…哈哈 基本格式 函数式列表组件（举例） 写法一 function list(props) { const numbers = props.numbers; var listItems = numbers.map((numer) => <li k...
React-smart-forms：提高表单开发效率的React库
React-smart-forms内置了数据绑定功能，允许开发者将表单元素与React组件的状态直接绑定。这意味着，当表单输入值发生变化时，绑定的状态也会同步更新，反之亦然。此外，React-smart-forms还支持自定义验证规则，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值