我将如何获取输入框的值来打印我自己的自定义消息？

Question

我有一个 json，其中包含父母姓名和父母拥有的孩子。

我有一个代码可以获取 json 的父母和孩子的名字。根据孩子的数量，创建输入框，以便您输入每个孩子的名字。但我被困住了。当我单击按钮时，我将如何打印一条以父名称开头的消息，并将每个输入框中的值与 json 的值和允许我命名孩子的框组合起来

例如，当我从下拉列表中单击“jim”时，会出现 2 个输入框，上面写着“child1”和“child2”，并且在它们旁边显示两个框，因为他有两个孩子。如果我将 child1 命名为“james”，将 child2 命名为“mary”并按下按钮，我如何在最后的输入框中打印一条消息

“吉姆——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

我创建了一个example here，它可以满足您的需求。

请注意，我必须在某些地方添加/修改一些 key 属性，因为存在一些控制台错误。

您还需要在某个时候将输入值与状态同步。 在此示例中，我在每次击键时都执行此操作，但您必须了解这对性能的影响。您可以选择不同的同步时间（模糊、去抖动等），它是由你决定。

我修改了输入的名称属性，使每一个都有唯一的，并且可以在同步到状态的函数中被识别 (onChildNameChange)。

顺便说一句，有一些不错的库可以为您节省同步的样板文件，例如react-hook-form（仅限功能组件）和formik。

至于打印输出字符串，我使用Array.reduce构建它。