React / Next.js обрабатывает несколько входных значений Element при нажатии кнопки

Question

У меня есть несколько элементов ввода и одна кнопка, которая должна собрать все входные значения вместе и поместить их в массив после нажатия кнопки.

        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <br></br>                     
        <p><button onClick = {() => this.handleAllIDs()}>absenden</button></p> 

Я хотел использовать только один метод для всех полей ввода,это как-то выполнимо, или мне придется использовать разные состояния для каждого поля ввода, чтобы дифференцировать значения, или даже создавать разные методы?После нажатия кнопки я хотел бы поместить все значения в массив массива элементов класса Element или аналогичный и выполнить запрос к базе данных с ними.

РЕДАКТИРОВАТЬ: Я думаю, что я нашел решение, вы можете назначить имясвойства для каждого элемента ввода (~ поле ввода), а затем просто запросите имя и задайте состояние как переменную состояния, названную так же, как поле ввода:

handleIDs= (event) => {
    let name = event.target.name;
    let id = event.target.value;
    if (isNaN(id)) {
        this.setState({errorMessage: 'ID is not a number'})
    } else {
        this.setState({ [evt.target.name]: evt.target.value });
    }       
}

Я не знал, что вы можете назначитьновые ключи к объектам с нотацией в скобках ..

EDIT2: я думаю, есть другой способ со ссылками на элемент DOM: Вы можете создать ссылочный объект в конструкторе класса:

constructor(props) {
    super(props);
    this.textInput1 =  React.createRef();
}

и затем передайте ссылку на элемент:

 <InputElement reference={this.textInput1}.../>

, если это пользовательский элемент, вы должны передать ссылку на базовый элемент курса:

const inputElement = (props) => (
    <input 
        ref={props.reference}
        onChange={props.onChangeListener}>
    </input>
)

Внутри методавы можете манипулировать своим элементом, ссылаясь на него с помощью ссылочного имени:

 handleInput = (event) => {
        console.log(this.textInput1.current.value);
     ...
}