Как получить input.value из ref react-компонента?

215

07 февраля 2020, 23:00

Как можно получить значение из input.value в стрелочной функции атрибута ref react-компонента?

Вот если в стрелочной функции сделать запись в локальную переменную компонента, и уже вне выражения в ref обратиться по ключу value, то все в порядке, а вот из самой стрелочной функции не могу обратиться по ключу.

Как видите элементы компонента формируются исходя из структуры, полученной в this.props.structure, поэтому я и ищу универсальный способ записи значений input в массив person по динамическим ключам.

import React from 'react'; 
 
const AddEntry = ({addEntry, structure, visible}) => { 
    let person = {}; 
    if (visible) { 
 
        return ( 
            <> 
                <tr className='table__row'> 
                    {structure.map((inputHeading, i) => <td className='table__table-data add-entry__table-data' key={i}> 
                        <input className='add-entry__input' form='add-entry' 
                               ref={(input) => {console.log(input.value); person[inputHeading.key] = input.value}} placeholder={inputHeading.name}/></td>)} 
                </tr> 
                <tr className='table__table-row'> 
                    <td colSpan='5' className='table__table-data'> 
                        <form id='add-entry' onSubmit={(e) => { 
                            e.preventDefault(); 
                            console.log(person); 
                        }}> 
                            <button className='button'>Add entry</button> 
                        </form> 
                    </td> 
                </tr> 
            </> 
        ); 
    } else { 
        return null; 
    } 
}; 
 
export default AddEntry;