При работе над проектом столкнулся над проблемой. В общем я получаю JSON данные по API и вывожу данные в таблицу. В таблице есть поля которые можно изменить (числовые).
Нужно сделать так, чтобы после ввода в input данных, информация отправлялась на Сервер по API. Там все обрабатывается, подсчитываются некоторые данные и потом мне нужно снова забрать все данные из сервера.
Конечно, есть вариант onChange для input, но не хочется при каждом вводе какого-то одного символа отправлять на сервер запрос и получать снова кучу данных, это замедлить работу (чел ввел 5 символов - это 5 запросов и 5 ответов с достаточно большими данными).
Пример моего компонента:
class Table extends React.Component {
handleOnChange(){ ... }
render() {
const data = this.props.data;
return (
<table>
...
<tbody>
{data.map(item => (
<tr>
<td>{item.id}</td>
<td>
<input
type="text"
placeholder={item.count}
onChange={() => this.handleOnChange()}
/>
</td>
</tr>
)}
</tbody>
</table>
)
}
}
Как сделать задумку? Пытался сделать новый компонент и обрабатывать там события и по setTimeout отправить данные, но не понял как, например, из TableTr вызвать функцию, которая Table и передать ей аргументы (значение input). Ref-ы использовать не получится вроде, там много компонентов TableTr будет.