时间戳

首页 > 解决方案 > 如何防止在reactJs中具有相同名称和相同onchange函数的自动输入值更改？

reactjs - 如何防止在reactJs中具有相同名称和相同onchange函数的自动输入值更改？

问题描述

我正在尝试制作一个评分系统，其中有学生列表，我必须为每个学生打分，每个输入字段都将具有相同的 onChange 功能，我在这里添加了一个演示沙箱。我希望每个输入字段都是唯一的，并且当我键入任何等级而不更改所有其余输入字段时，只会更改特定的输入字段。

https://codesandbox.io/s/fervent-browser-jnono?file=/src/App.js

我的代码如下，

import React, { useState } from "react";


export default function App() {
  const [grade, setGrade] = useState(null);

  let arr = [1, 2, 3, 4, 5, 6];

  const handleChange = (e) => {
    e.preventDefault();
    setGrade(e.target.value);
  };

  return (
    <div className="App">
      {arr.map((m) => (
        <input
          value={grade ? grade : ""}
          onChange={handleChange}
          placeholder="Enter Grade"
        />
      ))}
    </div>
  );
}

在这里，当我在第一个字段上键入时，它将影响所有输入的其余部分。

标签： reactjs

解决方案

我已经做到了，只是将我的输入分离到一个组件中，如下所示

export default function TestInput({ grade, handleChange }) {
  return (
    <div className='App'>
      <input value={grade} onChange={handleChange} placeholder='Enter Grade' />
    </div>
  );
}


 <TestInput
                      value={grade}
                      handleChange={handleChange}
                      placeholder='Enter Grade'
                      style={{ marginTop: "0px" }}
                    />

推荐阅读