React专栏：React-dom 支持的组件
|
205
|
0
|
前端开发类

927 字
|
19 分钟

React-dom 支持组件

表单组件

  • 不支持自定义属性的原生获取方式
名称 描述 建议或更多
<input> 支持原生input组件 支持原生各种类型的input
<select> 支持原生select组件, 传入value+onChange等事件控制组件 支持原生各种类型的select
<option> 支持原生option组件 除selected属性外，原生属性都支持
<textarea> 支持原生textarea组件 支持原生各种类型的textarea属性

  1. input

    属性名称 描述 建议或更多
    value value != null 值不为null, 组件受控
    checked Boolean: true/false 值不为null, 组件受控
    defaultChecked type='checkbox/radio' 默认选中项,仅非受控组件有效
    defaultValue defaultValue={yourValue} 初始化默认值，仅非受控组件有效
    均有效属性 点击查看其他均有效属性 
  // 简单输入框
      <input name="yourInput" placeholder="your-input-here"/>

    // 简单输入框受控使用
      <input name="yourInput" placeholder="your-input-here" value={yourInputVal} onChange={(e)=>{
        const val = e.target.value
        yourInputValSet(val)
      }} />

    // 放入Form中使用, 由form控制值
      import React ,{useRef, useEffect} from 'react'
      const YourForm = ()=>{
        ...
        let yourForm = useRef()
        useEffect(()=>{
          yourForm.current[0].value="changeByForm"
        }, [])
        return (
          <form ref={yourForm}>
            <input name="yourInput" placeholder="your-input-here"/>
          </form>
        )
      }

    // 结合ui库使用 Ant-design
      import React ,{useRef, useEffect} from 'react'
      import {Form, Input} from 'antd'

      const YourForm = ()=>{
        ...
        let yourForm = useRef()
        useEffect(()=>{
          yourForm.current.setFieldValue('yourInput', "changeByForm")
        }, [])
        return (
          <Form ref={yourForm}>
            <Form.Item name="yourInput">
                <Input placeholder="your-input-here"/>
            </Form.Item>

          </Form>
        )
      }
    /* 添加label  ====================== */
      // 给input 添加label
      <label>
        your-label:
        <input name="yourInput" placeholder="your-input-here"/>
      </label>

      //  Ant-design ui 只需在对应的 <Form.Item label="your-label"> 添加 label属性
      ... 
      <Form.Item name="yourInput" label="your-label">
          <Input placeholder="your-input-here"/>
      </Form.Item>

    /* 添加初始值  ====================== */
      // 简单组件
      <input name="yourInput" placeholder="your-input-here" defaultValue="init-value-simple"/>

      // 受控组件初始值
      ...
      const [yourInputVal, yourInputValSet] = useState() // *此处赋值也可，但不建议，会引起多次渲染， 建议放在生命周期函数中赋值*
      useEffect(()=>{
        yourInputValSet('init-value-controlled')
      }, [])
      <input name="yourInput" placeholder="your-input-here" value={yourInputVal} onChange={(e)=>{
        const val = e.target.value
        yourInputValSet(val)
      }}/>

      // 放入Form中使用, 由form控制值
      ...
      useEffect(()=>{
        yourForm.current[0].value="changeByForm"
      }, [])
      return (
        <form ref={yourForm}>
          <input name="yourInput" placeholder="your-input-here"/>
        </form>
      )
      ...

      // 结合ui库使用 Ant-design 直接使用formRef.setFieldValue赋值
      ...
      useEffect(()=>{
        yourForm.current.setFieldValue('yourInput', "changeByForm")
      }, [])
      ...
    /* 保存时获取值  ====================== */
      // 简单组件 通过ref获取当前值
        ...
        let yourInputRef = useRef()
        ...
        const getValue = ()=>{
          const value = yourInputRef.current.value
          return value
        }
        ...
        <input name="yourInput" ref={yourInputRef} placeholder="your-input-here" defaultValue="init-value-simple"/>

      // 受控组件， 直接获取控制value的字段即可
        const getValue = ()=>{
          return yourInputVal
        }
        <input name="yourInput" placeholder="your-input-here" value={yourInputVal} onChange={(e)=>{
          const val = e.target.value
          yourInputValSet(val)
        }}/>

      // 放入Form中使用, 由form控制值 , 由form获取
      ...
      const YourForm = ()=>{
        ...
        let yourForm = useRef()
        useEffect(()=>{
          yourForm.current[0].value="changeByForm"
        }, [])
        const getValue=(fieldName)=>{
          let value
          Array.from(yourForm.current).some(node=>{
            if(node.name === fieldName){
              value = node.value
              return true
            }
            return false
          })
          return value
        }
        getValue('yourInput') // log :当前 input[name:yourInput]的value
        return (
          <form ref={yourForm}>
            <input name="yourInput" placeholder="your-input-here"/>
          </form>
        )
      }

      // 结合ui库使用 Ant-design 直接使用formRef.getFieldValue获取

        ...
        const getValue=(fieldName)=>{
          return yourForm.current.getFieldValue(fieldName)
        }

  1. select

    • 需结合使用
    属性名称 描述 建议或更多
    value value != null 值不为null, 组件受控，通过对组件事件绑定控制组件值
    defaultValue defaultValue={yourValue} 初始化默认值，仅非受控组件有效
    均有效属性 点击查看其他均有效属性 

    // 简单组件
    <select>
      <option value={1}>abc</option>
    </select>

    //受控组件 
    import React, {useState} from 'react'
    const YourSelect = ()=>{
      const [excPer, excPerSet] = useState()
      const [list, listSet] = useState([])
      ...
      const onChange=(e)=>{
        excPerSet(e.target.value)
      }
      return (
        <select value={selectedValue} onChange={onSelectChange} onSelect={onSelected} ...>
          <option value={1}>abc</option>
        </select>
      )
    }

    // 放入表单
    import React, {useRef} from 'react'
    const YourSelect = ()=>{
      let formRef = useRef()
      const [list, listSet] = useState([])
      // ref获取
      const getSelectValue=()=>{
        console.log('your-select', formRef.current[0].value)
      }
      // 保存时事件获取
      const onFormSubmit=(e)=>{
        e.preventDefault() // 阻止冒泡，组件更新重新渲染
        const formdata = new FormData(e.target)
        // 打印formdata  多选时: 打印多条 ['t-select', '1225'],  ['t-select', '1224']
        for(const d of formdata.entries()){
          console.log('formdata', d)
        }
        ...

      }
      ...
      return (
        <form ref={formRef} onSubmit={onFormSubmit}>
          执行人员：
          <select name="your-select">
            {list.map(item=>(<option value={item.id} key={item.key}>{item.name}</option>))}
          </select>
          /* 可多选的select : 按住Ctrl/Command键点选实现多选 */
          <select name="your-select-multiple">
            {list.map(item=>(<option value={item.id} key={item.key} multiple={true}>{item.name}</option>))}
          </select>
          <button type="submit">提交</button>
        </form>

      )
    }

    // 结合ui库使用 Ant-design
    import React ,{useRef, useEffect} from 'react'
    import {Form, Select} from 'antd'

    const YourForm = (props)=>{
      ...
      let yourForm = useRef()

      useEffect(()=>{
        yourForm.current.setFieldValue('y-select', "init-changeByForm")
      }, [])
      const getSelectValue = ()=>{
        return yourForm.current.getFieldValue('y-select')
      }
      // 相对更灵活，有好多实现方式
      return (
        <Form ref={yourForm}>
          <Form.Item name="y-select">
            <Select options={props.list} />
          </Form.Item>
        </Form>
      )
    }

  1. option

    属性名称 描述 建议或更多
    selected 不支持 选中事件绑定在父组件 <select> 上
    disabled 点击查看disabled属性
    label 点击查看label属性
    value 点击查看value属性 
    <select defaultValue={'3'}>
      <option value={'1'}>莉莉</option>
      <option value={'2'} label="汤姆" />
      <option value={'3'} label="米兰" />
      <option value={'4'} label="lily" disabled={true}>李雷</option>
    </select>

  1. textarea

    属性名称 描述 建议或更多
    value value != null 值不为null, 组件受控，通过对组件事件绑定控制组件值
    defaultValue defaultValue={yourValue} 初始化默认值，仅非受控组件有效， 不可和<textarea>子元素</textarea>[会报警告]共用
    均有效属性 点击查看其他均有效属性 
 // 简单
    <textarea rows="2" cols="60" placeholder="请输入..." defaultValue="工作之余..."> </textarea>
    // 受控组件
    <textarea rows="2" cols="60" placeholder="请输入..." value={yourContent} onChange={onTextareaChange}> </textarea>

    // 放入表单
    import React, {useRef} from 'react'
    const YourSelect = ()=>{
      let formRef = useRef()
      const [list, listSet] = useState([])
      // ref获取
      const getValue=()=>{
        console.log('t-textarea', formRef.current[0].value)
      }
      // 保存时事件获取
      const onFormSubmit=(e)=>{
        e.preventDefault() // 阻止冒泡，阻止组件更新重新渲染
        const formdata = new FormData(e.target)
        // 打印formdata 
        for(const d of formdata.entries()){
          console.log('formdata', d)
        }
        ...

      }
      ...
      return (
        <form ref={formRef} onSubmit={onFormSubmit}>
          执行人员描述：
          <textarea name="t-textarea" rows="2" cols="60" placeholder="请输入..." ></textarea>
          <button type="submit">提交</button>
        </form>

      )
    }

    // 结合ui库使用 Ant-design
    import React ,{useRef, useEffect} from 'react'
    import {Form, Input} from 'antd'

    const YourForm = (props)=>{
      ...
      let yourForm = useRef()

      useEffect(()=>{
        yourForm.current.setFieldValue('y-textarea', "init-changeByForm")
      }, [])
      const getSelectValue = ()=>{
        return yourForm.current.getFieldValue('y-textarea')
      }
      // 相对更灵活，有好多实现方式
      return (
        <Form ref={yourForm}>
          <Form.Item name="y-textarea">
            <Input.TextArea  />
          </Form.Item>
        </Form>
      )
    }

其他组件

名称 描述 建议或更多
<progress> 支持原生progress 组件 支持原生各种类型的progress属性

  1. progress

    属性名称 描述 建议或更多
    value value != null 值不为null, 组件受控，通过对组件事件绑定控制组件值
    均有效属性 点击查看其他均有效属性 
<label>
    进度条
    <progress id="t-progress"  max={100} value={20}> 20 %</progress>
</label>

<label htmlFor="t-progress-2">进度条-2</label>
<progress id="t-progress-2"  max={100} value={70}> 70 %</progress>

通用内置组件

名称 描述 建议或更多
<label> 支持原生label 组件 属性for=> htmlFor
<form> 支持原生form 组件 支持原生组件的所有属性
  1. label
 // 添加label
    <label>
      your-label:
      ...  
    </label>
    // label 属性htmlFor == 原生属性 for
    <label htmlFor="t-input"></label>
    <input id="t-input" />
  1. form
  // 简单form 组件
    <form>
      ...
    </form>
    // 任意位置的form 子组件: 表单组件添加属性 form={yourform.id}， formRef和onSubmit事件均可以获得子组件的值
    <>
      <form id="t-form" ref={formRef} onSubmit={onFormSubmit}>
        ...
      </form>
      <input form="t-form"/> 
    </>
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇