react动态生成input、select标签以及思路总结_react 动态生成标签_六卿的博客

见贤思齐焉，见不贤内自省

首先我们需要有一个数据结构，首先需要是一个数组，当然字段都可以自己定义，我这里没按照规范起名。
核心在于将数据整理好，字段梳理清楚，将state中用到的字段动态插入，提醒必填项也要动态遍历。
比如：
   let stateOptions = [{
                value: 'name',
                title: '允许传送',
                type: 'inp',
                isrequird: true
            }, {
                value: 'age',
                title: '允许请求',
                type: 'sel',
                isrequird: false
            }, {
                value: 'runing',
                title: '允许递归',
                type: 'inp',
                isrequird: true
value标识当前字段的key
 title标识当前input或者select前面的名称
 type标识是input还是select
 isrequird标识当前是否是必填 
这里只写这几项，这是我在写项目之前的一个小样。所以并没有考虑的很全面。 
我们需要在页面挂载的时候，将变量动态的添加到状态机中： 
 componentDidMount() {
        setTimeout(() => {
            let stateOptions = [{
                value: 'name',
                title: '允许传送',
                type: 'inp',
                isrequird: true
            }, {
                value: 'age',
                title: '允许请求',
                type: 'sel',
                isrequird: false
            }, {
                value: 'runing',
                title: '允许递归',
                type: 'inp',
                isrequird: true
            //创建一个临时对象 添加属性方便
            let newObkj = {}
            //初始化在view层需要用到的变量 放置state中
            stateOptions.map(i => {
                // 到时候换成字段标识
                if (i.value === 'age') {
                    newObkj[i.value] = []
                } else {
                    newObkj[i.value] = ''
            //使用解构赋值的形式直接将生成好的变量对象放置state中
            this.setState({
                // 解构到state中
                ...newObkj,
                myOptionList: stateOptions
页面使用： 
    render() {
        let { myOptionList, } = this.state
        // 随机生成options 数组
        const children = [];
        for (let i = 10; i < 36; i++) {
            children.push({ title: `${i.toString(36) + i}`, key: `${i.toString(36) + i}` });
        // 必填标识  * 
        let isrequird = <a href="#!" style={{ color: '#ff7875', fontSize: '12px', marginTop: '8px', marginLeft: '8px' }}>*</a>
        return (
            <div className="context" >
                <div className="search"  >
                    <div className="search-input">
                        <p className="search-input-title">{'XX设置'}</p>
                        <div className="search-input-row" style={{ marginTop: '20px' }} style={{ flexDirection: "column" }}>
                            <span style={{ marginRight: '6%' }}></span>
                            <div style={{ textAlign: 'right', whiteSpace: 'nowrap', display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
                                    myOptionList.map((item, index) => {
                                        return (
                                            item.type === 'inp' ?
                                                <div key={index} style={{ display: 'flex', marginBottom: '10px' }}>
                                                    <Input value={this.state[`${item.value}`]} title={`${item.title}`} onChange={(e) => this.inputName(`${item.value}`, e.target.value)} />
                                                    {item.isrequird ? isrequird : ''}
                                                </div>
                                                item.type === 'sel' ?
                                                    <div key={index} className="search-input-row-element" style={{ marginBottom: '10px', display: 'flex', marginLeft: '0px' }}>
                                                        <Select
                                                            title={`${item.title}：`}
                                                            showArrow={true}
                                                            mode="tags"
                                                            style={{}}
                                                            value={this.state[`${item.value}`]}
                                                            onChange={(e) => { this.inputName(`${item.value}`, e) }}
                                                            tokenSeparators={[',']}
                                                            options={children}
                                                            keyField="key"
                                                            valueField="key"
                                                            titleField="title"
                                                            dropdownMatchSelectWidth={true}
                                                        ></Select>
                                                        {item.isrequird ? isrequird : ''}
                                                    </div>
                                                    : ''
                            </div>
                        </div >
                    </div>
                </div>
                <div className="device_search" style={{ marginLeft: "0px", marginBottom: '20px', marginTop: '20px', textAlign: "center" }}>
                    <Button Type="noIcon" title="测试按钮" onClick={() => this.bottomBtnClick('1')}></Button>
                    <span style={{ marginRight: '20px' }}></span>
                    <Button Type="noIcon" color="#E6A23C" title="返回" onClick={() => this.bottomBtnClick('2')}></Button>
                </div>
            </div>
上方使用三木运算判断标识显示input组件还是select组件，是否显示必填的标识。
 动态生成了select中的options。
 input和select输入获取值放置统一方法中：




    
 
    // 输入框 输入
    inputName = (type, e) => {
        let tempData = {}
        if (e.target) {
            tempData[type] = e.target.value
        } else {
            tempData[type] = e
        this.setState(tempData)
点击提交的时候动态遍历所有的必输项，没输入则提示： 
    bottomBtnClick = () => {
        let { myOptionList } = this.state
        // 动态遍历 必输项
        // 提交前判断格式中是否有必填项
        for (let key in myOptionList) {
            if (myOptionList[key].isrequird) {
                if (this.state[`${myOptionList[key].value}`] === '' || this.state[`${myOptionList[key].value}`].toString() === '[]') {
                    message.error(`请将${myOptionList[key].title}填写完整！`);
                    return false
        console.log(this.state)
全部代码：里面所有的都是使用antd组件写的，所有只看思路就ok




    
 
import React from 'react'
import { message } from 'antd';
import { withRouter } from 'react-router-dom'
import Button from '../../component/Button';
import Select from '../../component/Select';
import Input from '../../component/Input';
class Options extends React.Component {
    state = {
        myOptionList: [],
    componentDidMount() {
        setTimeout(() => {
            let stateOptions = [{
                value: 'name',
                title: '允许传送',
                type: 'inp',
                isrequird: true
            }, {
                value: 'age',
                title: '允许请求',
                type: 'sel',
                isrequird: false
            }, {
                value: 'runing',
                title: '允许递归',
                type: 'inp',
                isrequird: true
            let newObkj = {}
            stateOptions.map(i => {
                // 到时候换成字段标识
                if (i.value === 'age') {
                    newObkj[i.value] = []
                } else {
                    newObkj[i.value] = ''
            this.setState({
                // 解构到state中
                ...newObkj,
                myOptionList: stateOptions
    // 输入框 输入
    inputName = (type, e) => {
        let tempData = {}
        if (e.target) {
            tempData[type] = e.target.value
        } else {
            tempData[type] = e
        this.setState(tempData)
    bottomBtnClick = () => {
        let { myOptionList } = this.state
        // 动态遍历 必输项
        // 提交前判断格式中是否有必填项
        for (let key in myOptionList) {
            if (myOptionList[key].isrequird) {
                if (this.state[`${myOptionList[key].value}`] === '' || this.state[`${myOptionList[key].value}`].toString() === '[]') {
                    message.error(`请将${myOptionList[key].title}填写完整！`);
                    return false
        console.log(this.state)
    render() {
        let { myOptionList, } = this.state
        // 随机生成options 数组
        const children = [];
        for (let i = 10; i < 36; i++) {
            children.push({ title: `${i.toString(36) + i}`, key: `${i.toString(36) + i}` });
        // 必填标识  * 
        let isrequird = <a href="#!" style={{ color: '#ff7875', fontSize: '12px', marginTop: '8px', marginLeft: '8px' }}>*</a>
        return (
            <div className="context" >
                <div className="search"  >
                    <div className="search-input">
                        <p className="search-input-title">{'XX设置'}</p>
                        <div className="search-input-row" style={{ marginTop: '20px' }} style={{ flexDirection: "column" }}>
                            <span style={{ marginRight: '6%' }}></span>
                            <div style={{ textAlign: 'right', whiteSpace: 'nowrap', display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
                                    myOptionList.map((item, index) => {
                                        return (
                                            item.type === 'inp' ?
                                                <div key={index} style={{ display: 'flex', marginBottom: '10px' }}>
                                                    <Input value={this.state[`${item.value}`]} title={`${item.title}`} onChange={(e) => this.inputName(`${item.value}`, e.target.value)} />
                                                    {item.isrequird ? isrequird : ''}
                                                </div>
                                                item.type === 'sel' ?
                                                    <div key={index} className="search-input-row-element" style={{ marginBottom: '10px', display: 'flex', marginLeft: '0px' }}>
                                                        <Select
                                                            title={`${item.title}：`}
                                                            showArrow={true}
                                                            mode="tags"
                                                            style={{}}
                                                            value={this.state[`${item.value}`]}
                                                            onChange={(e) => { this.inputName(`${item.value}`, e) }}
                                                            tokenSeparators={[',']}
                                                            options={children}
                                                            keyField="key"
                                                            valueField="key"
                                                            titleField="title"
                                                            dropdownMatchSelectWidth={true}
                                                        ></Select>
                                                        {item.isrequird ? isrequird : ''}
                                                    </div>
                                                    : ''
                            </div>
                        </div >
                    </div>
                </div>
                <div className="device_search" style={{ marginLeft: "0px", marginBottom: '20px', marginTop: '20px', textAlign: "center" }}>
                    <Button Type="noIcon" title="测试按钮" onClick={() => this.bottomBtnClick('1')}></Button>
                    <span style={{ marginRight: '20px' }}></span>
                    <Button Type="noIcon" color="#E6A23C" title="返回" onClick={() => this.bottomBtnClick('2')}></Button>
                </div>
            </div>
export default withRouter(Options)
                    见贤思齐焉，见不贤内自省首先我们需要有一个数据结构，首先需要是一个数组，当然字段都可以自己定义，我这里没按照规范起名。核心在于将数据整理好，字段梳理清楚，将state中用到的字段动态插入，提醒必填项也要动态遍历。比如：   let stateOptions = [{                value: 'name',                title: '允许传送',                type: 'inp',                isrequird: 
import React, { useState } from ' react '
import TagsInput from ' taginput-react '
const TagsInputDemo = () = > {
  const [tags, setTags] = useState([])
  const handleOnChange = (data) = > {
    setTags(data)
  return (
    < TagsInput
      onChange={handleOnChange}
      placeholder= " Ent
import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';
class App extends Component {
  state = {...
				在我们的产品中有很多需要点击 或者回调函数执行时 生成DOM 标签 我称之为动态生成标签，在平时我们使用Jquery来实现时 我们通常会使用点击某个元素时调用JQ中的append()API 来实现 ，
我们实质上是利用事件来生成新的DOM 元素 
但是在React中我们尽量少的使用JQ 理解组件化的概念，那我们怎么利用它本身的某些API和方法来实现我们动态生成DOM的需求呢 
我们知道Rea
 import React from 'react' ;
import LabelsInput from 'react-labels-input' ;
var data = [ 'apple' , 'banana' , 'cheery' ] ;
function add ( value , tags ) {
  console . log ( 'add' , value ) ;
  console . log ( 'tags' , tags ) ;
function remove ( value , tags ) {
  console . log ( 'remove' , value ) ;
  console . log ( 'tags' , tags 
				React中遍历数组生成标签
举一个例子，一个列表根据数组渲染li元素，在vue中一个v-for就解决了，那在React中怎么实现呢？这里我们直接引入的React文件，没用脚手架
let arr = [1,2,3];
        ReactDOM.render(<ul>
                    arr.map(value => <li key={value}>{value}</li>)
  ：这是一个升级的且易于使用的API。 您可以将其自定义为最大。
React Native Selectme在React Native中非常简单，可自定义并且易于使用。 它已经在Android和IOS上进行了测试，并且非常吸引人。
npm i react-native-selectme --save
在您的Javascript文件中要求它。 还支持使用对象解构的组件。 Select Option OptionList 。
 <OptionList>
  var tankAreas: any;
  const renderOptions = () => {
    const areas = findTankAreas().then((res: any) => {
      const data = res.result.data
      tankAreas = data.map(item =>
        <Select.Optio..