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

Question

我有一系列输入组件，只想使用一个 onChange function。

在 Class 组件中，我知道我可以执行以下操作以适应不同的状态：

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

在功能组件中，如何仅使用一个onChange function 更新 state？

组件示例：

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

由于这是一种形式，我会将状态合并为一个，用 object 初始化它，然后当调用onChange处理程序时，用该值更新由输入id标识的属性。

这里使用useEffect来记录更新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

使用您在 class 中使用的相同方法，不同之处在于您将客户端和位置合并为一个 object，它将代表 state，并且您利用了id ：

 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>