使用 React 功能组件抽象 forms 和输入的最佳方法？

Question

I am kind of new to React and especially to the hooks and functional components, I building a website, and like any other website, I need to avoid repeating myself, and abstract my code for reuse, I created abstracted forms using classes and inherited the form and added on it like this:

class InputForm extends React.Component {
  state: {}
  validate = () => {
    const { error } = Joi.validate(this.state.data, this.schema)
    if (!error) {
      return null
    } else {
      const errors = {}
      error.details.map((oneError) => {
        errors[oneError.path[0]] = oneError.message
        return errors
      })
      return errors
    }
  }
  validateProperty = ({ name, value }) => {
    const obj = { [name]: value }
    const schema = Joi.object({ [name]: this.schema[name] })
    const errors = {}
    const { error } = Joi.validate(obj, schema)
    if (!error) {
      return null
    } else {
      error.details.map((oneError) => {
        errors[oneError.path[0]] = oneError.message
        return errors
      })
      return errors ? errors : null
    }
  }
  handleSubmit = (e) => {
    console.log('calling handleSubmit line 1')
    let { errors } = { ...this.state }

    e.preventDefault()
    if (!errors) {
      console.log('no errors')
      return
    } else {
      errors = this.validate() || {}
      console.log('errors values are: ', errors)
      if (Object.keys(errors).length === 0) {
        console.log('calling do submit in handleSubmit')
        this.doSubmit(e)
      }

      this.setState({ errors })
    }
    console.log('done submitting')
  }
  handleOnChange = ({ currentTarget: input }) => {
    let { data, errors } = { ...this.state }
    data[input.name] = input.value
    errors = this.validateProperty(input) || {}

    this.setState({ data, errors })
  }
/// you can see I use this to renender any input
  renderInputField = (
    name,
    label,
    type,
    message,
    onChangeParams = this.handleOnChange,
    ...rest
  ) => {
    const { data, errors } = { ...this.state }
    return (
      <InputField
        {...rest}
        name={name}
        value={data[name]}
        label={label}
        onChange={(e) => {
          this.handleOnChange(e)
          onChangeParams(e)
        }}
        type={type}
        message={message}
        errors={errors[name]}
      ></InputField>
    )
  } 
/// you can see I use this to renender any drop down input
  renderInputFieldDD = (name, label, type, message, options, ...rest) => {
    const { data, errors } = { ...this.state }
    return (
      <InputFieldDD
        {...rest}
        name={name}
        value={data[name]}
        label={label}
        onChange={this.handleOnChange}
        type={type}
        message={message}
        options={options}
        errors={errors[name]}
      ></InputFieldDD>
    )
  }
  renderButton = (label) => {
    return (
      <button
        onClick={this.handleSubmit}
        type='submit'
        className='btn btn-primary'
      >
        {label}
      </button>
    )
  }
}

export default InputForm

I wanted to do the same thing using functional components, I tried using HOC, but that is quite messed if I had to pass all the info I need in an input via props, composing components using other ones with props is not as easy as inheritance using class-based components either, I could achieve some composition and make code more reusable, but I don't know if there is anything specific that will make code more reusable with functional components!

Answer 1

So you want to create a form and extract whatever filled in it and store it inside an object using states .

1. You'll import useState() from react and create an empty object

import {useState} from 'react';

const FormComponent = () =>{
    const [data,setData] = useState({name:"",age:""}) 
    // this hook returns 2 values, the state and a function to update it that takes a single argument that is the updated state value

}

2. Create a form with onChange attribute in every input tag inside FormComponent defined earlier.

const FormComponent = () =>{
    return (
        <form>
            <input type="text" value={data.name} placeholder="Name" onChange={(e)=>setData({...data,data.name:e.target.value})}/>

            <input type="text" value={data.age} placeholder="Age" onChange={(e)=>setData({...data,data.age:e.target.value})}/>
        </form>
    )
}

In the above code the e.target.value extracts the value from the html tag that is the input tag here using the event object . The onChange attribute triggers every time you change something or type in the input tag. You can also refer to this code here