React——react中的表单

一、react的表单

二、自定义表单组件

1.多选框组件

import React from 'react'

/**
 * 一组多选框
 */
export default function CheckboxGroup(props) {

    return (
        <div className='checkboxGroup'>
            {getCheckboxs(props)} 
        </div>
    )
}

/**
 * 处理check发生变化
 * @param {*} e 事件对象 
 */
function handleChange(e, props) {
    // 获取元素的name
    const name = e.target.name;
    // 获取该元素的value值
    const value = e.target.value;
    let newChooseDatas = [];
    if (e.target.checked) { // 如果选中了
        newChooseDatas = [...props.chooseDatas, value ];
    }else {
        newChooseDatas = props.chooseDatas.filter(it => it !== value);
    }
    // 调用一个onChange事件
    props.onChange && props.onChange(newChooseDatas, name, e);
}

function getCheckboxs(props) {
    return props.data.map(it => (
        <label key={it.value}>
            <input
                name={props.name}
                value={it.value}
                type='checkbox'
                checked={props.chooseDatas.includes(it.value)}
                onChange={e => handleChange(e, props)}
            />
            {it.label}
        </label>
    ));
}

多选框组件测试

import React, { Component } from 'react'
import CheckboxGroup from './'

export default class Test extends Component {

    state = {
        checkboxGroupData: [
            {value: 'football', label: '足球'},
            {value: 'basketball', label: '篮球'},
            {value: 'music', label: '音乐'},
            {value: 'pingpangball', label: '乒乓球'},
            {value: 'other', label: '其他'},
        ],
        checkboxGroupChooseDatas: [],
        checkboxGroupName: 'myLove'
    }

    handleChange = (newChooseDatas, name, e) => {
        this.setState(state => {
            return {
                checkboxGroupChooseDatas: newChooseDatas
            }
        })
    }

    render() {
        return (
            <div>
                <CheckboxGroup
                    data={this.state.checkboxGroupData}
                    chooseDatas={this.state.checkboxGroupChooseDatas}
                    name={this.state.checkboxGroupName}
                    onChange={this.handleChange}
                />
            </div>
        )
    }
}

2.单选框组件

import React from 'react'

/**
 * 一组单选框组件
 */
export default function RadioGroup(props) {

    return (
        <div className='radioGroup'>
            {getRadios(props)} 
        </div>
    )
}

/**
 * 处理check发生变化
 * @param {*} e 事件对象 
 */
function handleChange(e, props) {
    // 获取元素的name
    const name = e.target.name;
    // 获取该元素的value值
    const value = e.target.value;
    // 调用一个onChange事件
    props.onChange && props.onChange(value, name, e);
}

function getRadios(props) {
    return props.data.map(it => (
        <label key={it.value}>
            <input
                name={props.name}
                value={it.value}
                type='radio'
                checked={props.value === it.value}
                onChange={e => handleChange(e, props)}
            />
            {it.label}
        </label>
    ));
}

单选框组件测试

import React, { Component } from 'react'
import RadioGroup from './'

export default class Test extends Component {

    state = {
        radioGroupData: [
            {value: 'football', label: '足球'},
            {value: 'basketball', label: '篮球'},
            {value: 'music', label: '音乐'},
            {value: 'pingpangball', label: '乒乓球'},
            {value: 'other', label: '其他'},
        ],
        radioGroupValue: '',
        radioGroupName: 'myLove'
    }

    handleChange = (value, name, e) => {
        this.setState(state => {
            return {
                radioGroupValue: value
            }
        })
    }

    render() {
        return (
            <div>
                <RadioGroup
                    data={this.state.radioGroupData}
                    value={this.state.radioGroupValue}
                    name={this.state.radioGroupName}
                    onChange={this.handleChange}
                />
            </div>
        )
    }
}

3.单选下拉框组件

import React from 'react'

/**
 * 单选下拉框组件
 * @param {*} props 
 * @returns 
 */
export default function SingleSelectGroup(props) {
    return (
        <div className='singleSelectGroup'>
            {getSelect(props)}
        </div>
    )
}

/**
 * 根据传入的属性生成select的react对象
 * @param {*} props 
 * @returns 
 */
function getSelect(props) {
    return (<select onChange={e => handleChange(e, props)} name={props.name}>
        {
            props.options.map(it => (
                <option key={it.value} value={it.value}>{it.label}</option>
            ))
        }
    </select>);
}

/**
 * 处理select选项改变时的方法
 * @param {*} e 
 * @param {*} props 
 */
function handleChange(e, props) {
    const name = e.target.name;
    const value = e.target.value;
    props.onChange && props.onChange(value, name, e);
}

单选下拉框测试

import React, { Component } from 'react';
import SingleSelectGroup from '.';

export default class Test extends Component {

    state = {
        options: [
            { value: 'football', label: '足球' },
            { value: 'basketball', label: '篮球' },
            { value: 'music', label: '音乐' },
            { value: 'pingpangball', label: '乒乓球' },
            { value: 'other', label: '其他' },
        ],
        value: '',
        name: 'myLoves'
    }

    handleChange = (value, name, e) => {
        this.setState((state) => {
            return {
                value
            }
        })
    }

    render() {
        return (
            <div>
                <SingleSelectGroup
                    onChange={this.handleChange}
                    {...this.state}
                />
            </div>
        )
    }
}

页面展示

import './App.css';
import CheckboxGroupTest from './components/CheckboxGroup/Test';
import RadioGroupTest from './components/RadioGroup/Test';
import SingleSelectGroupTest from './components/SingleSelectGroup/Test';

function App() {
  return (
    <div className="App">
      <CheckboxGroupTest />
      <RadioGroupTest />
      <SingleSelectGroupTest />
    </div>
  );
}

export default App;