react万能変更フォーム項目

12381 ワード

//      
export const changeForm = (key, value, formData) => {
     
  let cloneFormData = formData
  if (typeof key == 'object' && typeof key.length == 'number' && (typeof value == 'number' || typeof value == 'string')) {
     
    for (let i = 0, len = key.length; i < len; i += 1) {
     
      let newKey = key[i]
      cloneFormData[newKey] = value
    }
  } else if (typeof key == 'object' && typeof key.length == 'number' && typeof value == 'object' && typeof value.length == 'number') {
     
    for (let i = 0, len = key.length; i < len; i += 1) {
     
      let newKey = key[i]
      cloneFormData[newKey] = value[i]
    }
  } else {
     
    cloneFormData[key] = value
  }
  return cloneFormData
}

使用時
import {
      changeForm } from '../../utils/changeForm'

class Demo extends Component {
     
	constructor(props) {
     
		super(props)
		this.state = {
     
			formData: {
     
				one: 1,
				two: 10
			}
		}
	}
	componentDidMount() {
     
		this.changeForm(['pageNo', 'pageSize'], [100, 10000])
	}
	changeForm = (key, value) => {
     
		return new Promise((resolve) => {
     
			this.setState({
     
				formData: changeForm(key, value, this.state.formData)
			}, () => {
     
				resolve()
			})
		})
	}
	render() {
     
		return (
		<React.Fragment>
			<Input onChange={
     e => this.changeForm('one', e.target.value)} />
			<Input onChange={
     e => this.changeForm('two', e.target.value)} />
			<RangePicker onChange={
     (dates, dateStrings) => this.changeForm(['startTime','endTime'],dateStrings)} format="YYYY-MM-DD" />
		</React.Fragment>
		)
	}
}