时间戳

首页 > 解决方案 > 如何遍历 React 中的新输入框渲染器并获取数组中的值？

javascript - 如何遍历 React 中的新输入框渲染器并获取数组中的值？

问题描述

我需要动态生成带有单个输入框的多个 div，以便用户可以添加一个数字。

用户可以通过单击按钮添加任意数量的带有输入框的 div 以在其中输入数字。

用户输入数据后，必须点击一个按钮来处理数据。

我已经了解了如何使用 React 遍历现有数组，但不了解如何遍历用户动态创建的新 DOM 树，然后生成一个包含所有输入框内的值的数组。

处理后，将显示不同的值（最大值、最小值、平均值、方程返回结果等）

标签： javascriptreactjs

解决方案

如果没有看到您的代码，很难提供帮助，但您可能希望使用受控输入而不是不受控制的输入，因此您将拥有一个输入的当前值数组作为状态信息。

例如，在使用钩子的功能组件中：

const { useState } = React;

function Example() {
    // The values we use on the inputs
    const [values, setValues] = useState([]);

    // Update the value at the given index
    const updateValue = (value, index) => {
        setValues(values =>
            Object.assign([], values, {[index]: value})
        );
    };
    
    // Add an input
    const addInput = () => {
        setValues(values => [...values, ""]);
    };

    // Get the sum (just an example; and one of the very few places I'll use `reduce`)
    const sum = values.reduce((sum, value) => sum + Number(value), 0);

    // Render as many inputs as we have values, along with the
    // button to add an input and the sum
    return (
        <div>
            <div>
            {values.map((value, index) =>
                <div key={index}>
                    <input type="text" value={value} onChange={evt => updateValue(evt.target.value, index)} />
                </div>
            )}
            </div>
            <div>Sum: {sum}</div>
            <input type="button" value="Add Input" onClick={addInput} />
        </div>
    );
}

ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

推荐阅读