Question

我有一个表单，它有一个名为admissionNumber 的输入字段和按钮。在输入字段中，当用户输入数字并单击按钮，然后函数 getAllStudent 过滤一个数组。如果录取号码与输入的号码匹配，则其他字段（全名和教职员工）会自动填写。我怎样才能做到这一点？请有人帮我做这件事。谢谢

getAllStudents 函数，返回学生详细信息（admissionNumber、fullname、faculty）

 getAllStudents(user._id, token).then((data) => {
  if (data.error) {
    setValues({ ...values, error: data.error });
  } else {
    setValues(data);
  }
});

表单域

<input
            type="text"
            onChange={(event) => {
              setSearchTerm(event.target.value);
            }}
            className="form-control offset-md-2  col-md-6"
            placeholder="Admission Number"
            required
            maxLength="5"
          />

          <button
            // onClick={}
            className="btn rounded ml-4"
            
          >
            Verify
          </button>
        </div>
        <div className="bg-dark rounded">Personal Details</div>
        <div className="row form-group ">
          <input
            type="text"         
            name="studentFullName"
            className="form-control mt-2 offset-md-2 col-md-8"
            placeholder="Student Name"
           
          />
          <input
            type="text"
            name="faculty"
            className="form-control mt-2 offset-md-2 col-md-8"
          />
        </div>

Answer 1

您应该将函数传递给按钮 onClick 属性。

假设您使用功能组件和具有 students、currentUser 和 searchTerm 的状态，您可以执行以下操作：

const [students] = useState([...])

const [currentUser, setCurrentUser] = useState(undefined)

const [searchTerm, setSearchTerm] = useState(undefined)


const checkStudent = () => {
    const match = students.find(student  => student.admissionNumber === searchTerm)
    if(match) {
        setCurrentUser(match)
    }
}

return (
    <>
        <button
            onClick={() => checkStudent()}
        />

        <input
            type="text"         
            name="studentFullName"
            className="form-control mt-2 offset-md-2 col-md-8"
            placeholder="Student Name"
            value={currentUser?.fullname}
        />
    </>
)

如何在反应中添加过滤器方法 onclick 按钮

1 个答案: