javascript - 从响应中的输入发送值（将 querySelector(id) 更改为响应）

问题描述

我正在尝试从 vanilla js 重写一个小型应用程序以做出反应，并且在一个元素中我遇到了在输入中传递值的问题。这个元素的作用是，在选择一个数字后，它会生成许多要填充的输入，并在填充后进一步发送其 id 和值（值也可以为空）在 Vanilla Js 中，我使用 id 和 querySelector 来完成，但在 React改正的麻烦

反应代码：

import React, { useState, useEffect } from "react";
import "./style.css";
import Values from "./Values";

export default function App() {
  const [numberValue, setNumberValue] = useState("");
  const [inputValues, setInputValues] = useState([]);
  const [sendValues, setSendValues] = useState(false);
  const [inputs, setInputs] = useState([]);
  let numbers = [4, 6, 8];

  //reset teamsName on change teamsValue
  useEffect(() => {
    for (let i = 1; i <= numberValue; i++) {
      setInputValues(prev => [
        ...prev,
        {
          id: i,
          value: ""
        }
      ]);
    }
  }, [numberValue]);

  const showButtons = numbers.map((number, i) => (
    <button
      className={`${numberValue === number ? "button active" : "button"}`}
      onClick={() => {
        setNumberValue(number);
        setInputValues([]);
        setInputs([]);
        showInputs();
      }}
    >
      {number}
    </button>
  ));
  //let inputs = [];
  const showInputs = () => {
    for (let i = 1; i <= numberValue; i++) {
      setInputs(prev => [
        ...prev,
        <input
          type="text"
          className="input"
          placeholder={`Input ${i}`}
          //value={inputValues.find(input => input.id === i && input.value)}
          onChange={e =>
            inputValues.filter(
              input =>
                input.id === i &&
                setInputValues([
                  ...inputValues,
                  { id: i, value: e.target.value }
                ])
            )
          }
        />
      ]);
    }
  };

  return (
    <>
      <div className="button-group">{showButtons}</div>
      {numberValue && (
        <>
          <h3 className="title">Your inputs</h3>
          <div className="input-group">{inputs}</div>
        </>
      )}
      <button onClick={() => setSendValues(true)}>SEND</button>
      {sendValues && <Values inputValues={inputValues} />}
    </>
  );
}

JS：

const buttonGroup = document.querySelector(".button-group");
const inputGroup = document.querySelector(".input-group");
const inputValues = document.querySelector(".input-values");
let n;
const showInputs = number => {
  n = number;
  inputGroup.innerHTML = ''
  for (let i = 1; i <= number; i++) {
    inputGroup.innerHTML += `
      <input type="text" name="name" id="input-${i}" class="input" placeholder="team name"> <br>
    `;
  }
};
let values = []
const showValues = () => {
  //clear
  inputValues.innerHTML = '';
  values = [];
  //show new
  for (let i = 1; i <= n; i++) {
      const input_val = document.querySelector(`#input-${i}`).value;
      values.push({
        id: i,
        value: input_val
      });
    } 
  
  for(let i = 0; i<=n; i++){
      inputValues.innerHTML += `
  <p>id: ${values[i].id} value:${values[i].value}
  </p>
  `
  }

};

代码链接：React -> https://stackblitz.com/edit/react-uw9dzc?file=src/App.js JS -> https://codepen.io/Arex/pen/qBqLVBq?editors=1111

标签： javascriptreactjs

解决方案

共享代码中存在多个问题，如下所示：

不建议将组件存储在状态中，在共享代码中您将<input/>组件存储在状态中。有关更多详细信息，请查看此
使用了不必要的状态，总是尽量保持最少的状态，因为更多的状态需要管理，使事情变得不必要地复杂。
使用以前的状态语法在不需要的地方生成新状态。

我正在添加一个更改最少的工作代码供您参考。

应用程序.js

import React, { useState, useEffect } from "react";
import "./style.css";
import Values from "./Values";

export default function App() {
    const [numberValue, setNumberValue] = useState('');
    const [inputValues, setInputValues] = useState([]);
    const [sendValues, setSendValues] = useState(false);
    let numbers = [4, 6, 8];

    //reset teamsName on change teamsValue
    useEffect(() => {
        setInputValues(
            Array(numberValue).fill("")
        );
        setSendValues(false)
    }, [numberValue]);

    const showButtons = numbers.map((number, i) => (
        <button
            className={`${numberValue === number ? "button active" : "button"}`}
            onClick={() => {
                setNumberValue(number);
            }}
        >
            {number}
        </button>
    ));
    return (
        <>
            <div className="button-group">{showButtons}</div>
            {numberValue && (
                <>
                    <h3 className="title">Your inputs</h3>
                    <div className="input-group">
                        {inputValues.map((val, i) => (
                            <input
                                key={`input${i}`}
                                type="text"
                                className="input"
                                placeholder={`Input ${i+1}`}
                                value={val}
                                onChange={(e) => {let newValues = inputValues.slice(); newValues[i]=e.target.value; setInputValues(newValues)}
                                }
                            />
                        ))}
                    </div>
                </>
            )}
            <button onClick={() => setSendValues(true)}>SEND</button>
            {sendValues && <Values inputValues={inputValues} />}
        </>
    );
}

值.js

import React from "react";

const Values = ({ inputValues }) => {
  const showValues = inputValues.map((input, i) => (
    <div key={'output'+i}>
      {i+1} : {input}
    </div>
  ));
  return <div>{showValues}</div>;
};

export default Values;

我还分享了您分享的更新的 stackblitz 代码参考，以便更好地理解更新的代码片段和修复以供参考。

javascript - 从响应中的输入发送值（将 querySelector(id) 更改为响应）

问题描述

解决方案

推荐阅读