reactjs - 如何在不提交的情况下获得输入 onchange 结果？

Question

我尝试使用 useState 获取 onChange 值，我应该循环输入标签，但标签看起来相同，没有人知道要添加多少输入，所以我想做的是在没有提交按钮的情况下推送数组。

这是测试代码，我将对其进行映射，我尝试这样做：

import React, { useState } from "react";

const Test = () => {
  const [labelName, setLabelName] = useState("");
  const [labelContainer, setLabelContainer] = useState([]);

  const getTextValue = e => {
    setLabelName(e.target.value);
    setLabelContainer([...labelContainer, labelName]);
  };
  return (
    <div>
      num1 YAXIS:
      <input type="text" onChange={getTextValue} />
      num2 YAXIS:
      <input type="text" onChange={getTextValue} />
      num3 YAXIS:
      <input type="text" onChange={getTextValue} />
      <h1>num1 YAXIS:{labelContainer[0]}</h1>
      <h1>num2 YAXIS:{labelContainer[1]}</h1>
      <h1>num3 YAXIS:{labelContainer[2]}</h1>
    </div>
  );
};

export default Test;

但我无法得到每个结果。

标签： reactjs

Answer 1

这是你需要的吗？

import React, { useState } from "react";
export default function Test(props){
  const [labelName, setLabelName] = useState("");
  const [labelContainer, setLabelContainer] = useState([]);

  const getTextValue = (e,index) => {
    setLabelName(e.target.value);
    let temp=JSON.parse(JSON.stringify(labelContainer));
    temp[index]=e.target.value;
    setLabelContainer(temp);        
  };
  return (
    <div>
      num1 YAXIS:
      <input type="text" onChange={(e)=>getTextValue(e,0)} />
      num2 YAXIS:
      <input type="text" onChange={(e)=>getTextValue(e,1)} />
      num3 YAXIS:
      <input type="text" onChange={(e)=>getTextValue(e,2)} />
      <h1>num1 YAXIS:{labelContainer[0]}</h1>
      <h1>num2 YAXIS:{labelContainer[1]}</h1>
      <h1>num3 YAXIS:{labelContainer[2]}</h1>
    </div>
  );
}