在 onChange 事件期间处理状态

Question

处理 onChange 事件期间的状态，多个对象的数组，以及具有多个键值对的对象，不知道 onChange 如何处理和更新状态而不覆盖任何对象或对象的值

// state exits with array of multiple objects and objects with multiple key value pairs.

const [employement, setEmployement] = useState([{title:"react_js", exp:"good", id:1}, {title:"laravel", exp:"master", id:2}, {title:"node_js", exp:"well", id:3},{title:"flutter", exp:"mid", id:4}]) 

// method to change the input value
const handleChange =(id, inputValue)=>{
  // need help how to change the single value , without any over in object value and without overRIght whole object in an array .
  employement.filter((emp) => {
    if (emp.id === id) {
      setEmployement([{ ...emp, job_title: inputValue }]);
    }
  });

  // but upper logic not working correctly, this code need improvement
}

// map method to iterate the array 
employement.map(singleEmp=>{
  <input type="text" value={singleEmp.title} onChange={(e)=>handleChange(singleEmp.id, e.target.value)}/>
})

// last this is dummy structure of my real code, real code is long enough but same as it, thank you for your any suggestions

Answer 1

试试这个作为你的 handleChange 方法

  // method to change the input value
  const handleChange = (id, inputValue) => {
    setEmployement((prevstate) => {
      return employement.map((emp) => {
        if (emp.id === id) {
          return { ...emp, title: inputValue };
        }
        return emp;
      });
    });
  };

代码沙箱 => https://codesandbox.io/s/nice-greider-0efof?file=/src/App.js

在 onChange 事件期间处理状态

handling state during onChange event

javascript

frontend

state

reactjs

react-state-management