Как мне получить значение из полей ввода, чтобы распечатать собственное сообщение?

Question

У меня есть json, который состоит из имени родителя и детей, которые есть у родителя.

У меня есть код, который захватывает имя родителя и детей из json. В зависимости от количества детей создаются поля ввода, чтобы вы могли ввести имя каждого ребенка. Но я застрял. Когда я нажимаю кнопку, как мне распечатать сообщение, которое начинается с родительского имени и объединяет значения из каждого поля ввода из значений json и полей, которые позволяют мне назвать дочернего элемента

для Например, когда я нажимаю «jim» в раскрывающемся списке, появляются 2 поля ввода, в которых написано «child1» и «child2», и два поля появляются рядом с ними, потому что у него есть два ребенка. если я назову child1 "james" и child2 "mary" и pu sh кнопку, как я могу напечатать сообщение в последнем поле ввода, в котором говорится:

"Jim - child1 = james - child2 = mary "

import React from 'react';

class AppEX extends React.Component {
    constructor() {
        super();
        this.state = {
            kids: null,
            parentname: null,
            parent: [
                { name: 'will', kids: ['child1', 'child2'] },
                { name: 'kia', kids: ['child1'] },
                { name: 'jim', kids: ['child1', 'child2'] }
            ]
        };
    }

    handleParentChoice = e => {
        e.persist();
        this.setState({
            parentname: e.target.value
        });
    };

    render() {
        const namelist = [];
        this.state.parent.forEach(e => {
            namelist.push({ value: e.name, label: e.name });
        });
        return (
            <div>
                <select name="select" onChange={this.handleParentChoice}>
                    {namelist.map(n => (
                        <option key={n.value} value={n.value}>
                            {n.label}
                        </option>
                    ))}
                </select>
                <br />
                {this.state.parentname &&
                    this.state.parent
                        .find(p => p.name === this.state.parentname)
                        .kids.map(k => (
                            <div>
                                <input
                                    key={k}
                                    type="text"
                                    value={k}
                                    disabled={true}
                                />
                                <input key={k} type="text" />
                            </div>
                        ))}
                <br />
                <button type="button" value="render" onClick={this.print} />
                <input type="text" disabled={true} />
            </div>
        );
    }
}

export default AppEX;

Answer 1

Я создал здесь пример , который делает то, что вам нужно.

Обратите внимание, что мне пришлось добавить / изменить некоторые атрибуты key в некоторых местах, потому что были некоторые ошибки консоли.

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

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

И, кстати, есть несколько хороших библиотек, которые могут избавить вас от шаблонного кода синхронизации, например response-hook-form (только функциональные компоненты) и formik .

Что касается печати выходной строки, я использовал Array.reduce для ее создания.