React：DRY 功能组件集 state 带变量

Question

I have a series of Input components and want to use only one onChange function.

Within a Class component I know I am able to do something like the following to adapt to the different states:

inputChange(input) {
    this.setState({
      [input.name]: input,
    });
  }

How, within a functional component, can I update state with only one onChange function?

Example of a component:

function Form(){
  const [selectedClient, updateSelectedClient] = useState(null);
  const [selectedLocation, updateSelectedLocation] = useState(null);
 

  return(

   <input
     value={selectedClient}
     id="selectedClient"
     name="selectedClient"
     onChange={???}
   />
   <input
    value={selectedLocation}
    id="selectedLocation"
    name="selectedLocation"
    onChange={???}
  />
  );
}

Thank you for the time!

Answer 1

Since this is one form I would combine the states into one, initialising it with an object, and then when the onChange handler is called update the property identified by the input id with the value.

useEffect is used here to log the result of updating the state.

 const { useEffect, useState } = React; function Example() { const [form, setForm] = useState({}); useEffect(() => { console.log(form); }, [form]) function handleChange(e) { // Grab the id and value from the input const { id, value } = e.target; // Create a new object by spreading out the current form // state, and setting the state property to the new value setForm({...form, [id]: value }); } return ( <div> Client: <input value={form.client} id="client" name="client" onChange={handleChange} /> Location: <input value={form.location} id="location" name="location" onChange={handleChange} /> </div> ); } // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 input { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 2

use the same method you used in the class, the difference is you combine the client and location into one object which will represent the state, and you take advantage of the id s:

 const {useState} = React; function Form(){ const [selectedClientOrLocation,setSelectedClientOrLocation] = useState({ selectedClient:"", selectedLocation:"" }) const handleChange = (e) =>{ setSelectedClientOrLocation({...selectedClientOrLocation,[e.target.id]:e.target.value}) } return( <form> <label htmlFor="selectedClient"> Client <input value={selectedClientOrLocation.selectedClient} id="selectedClient" name="selectedClient" onChange={handleChange} /> </label> <br/> <label htmlFor="selectedLocation"> Location <input value={selectedClientOrLocation.selectedLocation} id="selectedLocation" name="selectedLocation" onChange={handleChange} /> </label> </form> ) } ReactDOM.render(<Form/>,document.getElementById('root'))

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>