Как установить состояние объекта внутри массива в родительском компоненте из дочернего компонента?

Question

Я хочу изменить значение объекта внутри массива, который находится внутри моего состояния, который находится внутри моего родительского компонента, из моего дочернего компонента. Проблема в том, что мне нужны и event.target.value, и item.id (который является uuid), чтобы я мог знать, какой объект изменить. Однако после всех моих попыток я смог передать только одно значение: либо входное значение, либо item.id. Любая помощь приветствуется.

Вот мой компонент ввода:

<Input onChange={this.props.updateQuantity} defaultValue={item.unit_quantity || ""}/>

и вот обновление количества:

    updateQuantity = (e,id) => {
        var copy = [...this.state.items]
        for(let i = 0; i<copy.length; i++){
            if(copy[i].id == id){
                copy[i].unit_quantity = e.target.value;
                break;
            }
        }
        this.setState({
            items: copy
        })

    }

Answer 1

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

<Input onChange={(event)=>this.props.updateQuantity(event,item.id)} defaultValue={item.unit_quantity || ""}/>

и в родительском компоненте используйте как есть:

updateQuantity = (event,id) => {
    console.log(event, id)
    // Rest of the code...
}

Answer 2

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

Таким образом, вы меняете функцию, переданную на вход onChange, на локальную функцию в потомке:

<Input onChange={this.updateQuantity} defaultValue={item.unit_quantity || ""}/>

Затем вы создаете функцию внутри ребенка следующим образом:

updateQuantity = (e) => {
    this.props.updateQuantity(e, this.props.id);
}

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