# Привязка инпутов к объекту в React

Пусть в стейте хранится объект:

`const initObj = { prop1: 'value1', prop2: 'value2', prop3: 'value3', } function App() { const [obj, setObj] = useState(initObj); return <div> {obj.prop1}-{obj.prop2}-{obj.prop3} </div>; }`

Давайте выведем каждое свойство нашего объекта в отдельном инпуте:

`function App() { const [obj, setObj] = useState(initObj); return <div> <input value={obj.prop1} /> <input value={obj.prop2} /> <input value={obj.prop3} /> <br /> {obj.prop1}-{obj.prop2}-{obj.prop3} </div>; }`

Давайте теперь к каждому инпуту привяжем событие `onChange`. В качестве обработчика назначим одну общую функцию:

`function App() { const [obj, setObj] = useState(initObj); return <div> <input value={obj.prop1} onChange={event => handleChange('prop1', event)} /> <input value={obj.prop2} onChange={event => handleChange('prop2', event)} /> <input value={obj.prop3} onChange={event => handleChange('prop3', event)} /> <br /> {obj.prop1}-{obj.prop2}-{obj.prop3} </div>; }`

Как вы видите, функция `handleChange` первым параметром принимает имя соответствующего свойства объекта.

Давайте напишем реализацию нашей функции:

`function handleChange(prop, event) { const copy = Object.assign({}, obj); copy[prop] = event.target.value; setObj(copy); }`

Данная реализация рабочая, но ее можно упростить, если воспользоваться вычисляемыми именами свойств объекта:

`function handleChange(prop, event) { setObj({...obj, ...{[prop]: event.target.value}}); }`

Давайте соберем весь код вместе:

`function App() { const [obj, setObj] = useState(initObj); function handleChange(prop, event) { setObj({...obj, ...{[prop]: event.target.value}}); } return <div> <input value={obj.prop1} onChange={event => handleChange('prop1', event)} /> <input value={obj.prop2} onChange={event => handleChange('prop2', event)} /> <input value={obj.prop3} onChange={event => handleChange('prop3', event)} /> <br /> {obj.prop1}-{obj.prop2}-{obj.prop3} </div>; }`

Пусть в стейте хранится объект с датой:

`const initDate = { year: 2025, month: 12, day: 31, }`

Выведите в абзаце год, месяц и день из даты, хранящейся в стейте, а также день недели, соответствующий ей.

Модифицируйте предыдущую задачу, добавив три инпута для редактирования даты.

← →
↑