Передача свойства объекта через переменную в операторе распространения

Question

Я делал это раньше в реактивном проекте.

const [formState, setFormState] = useState({ username: '', password: '', });

const handleInputChange = (e)=>{
    if(e.target.name==="username"){
        setFormState({...formState, username:e.target.value })
    }
    if(e.target.name==="password"){
        setFormState({...formState, password:e.target.value })
        }
    }

У моих двух элементов ввода был onChange = {handleInputChange} для обновления входного значения.

Теперь у меня есть форма с многочисленными входами. И я хочу код, который может обновить ввод на основе имени ввода. как то так.

const handleInputChange=(e)=>{
    const inputName = e.target.name;
    const value = e.target.value;
    setFormState({...formState, inputName:value })
   };

Мне нужна помощь по этому вопросу, пожалуйста

Answer 1

Просто поместите inputName внутри []

const handleInputChange=(e)=>{
    const inputName = e.target.name;
    const value = e.target.value;
    setFormState({...formState, [inputName]:value })
   };

Answer 2

ES2015 позволяет вам создать вычисляемое имя свойства для объекта, используя следующий синтаксис:

const a = { [someKeyName]: 'myValue' }

, чтобы вы могли написать:

const handleInputChange = (e) => {
  setFormState({...formState, [e.target.name]: e.target.value })
};

Существует отличный ответ на вопрос здесь: Создание объекта с динамическими c ключами

Также следует соблюдать осторожность при рассмотрении вопроса о том, где будет использоваться этот синтаксис. Убедитесь, что он поддерживается в браузерах, которые вы собираетесь поддерживать. Согласно документам MDN здесь, он не будет использоваться в IE, если не будет перенесен.

Answer 3

Вы можете сделать имя для ввода динамическим c, как это

const handleInputChange=(e)=>{
  const inputName = e.target.name;
  const value = e.target.value;
  setFormState({...formState, [inputName]:value })
};