React Hooks - 动态渲染文本输入并将输入存储为一个数组

Posted 2023-03-11

【中文标题】React Hooks - 动态渲染文本输入并将输入存储为一个数组

【英文标题】：React Hooks - Dynamically Render Text Inputs and Store Inputs as One Array

【发布时间】：2020-01-09 21:28:48

【问题描述】：

我有一个如下所示的用户模型：

    "name": "Sun12",
    "role": "1",
    "email": "[e-mail]",
    "password": "test123",
    "about": "This is a description of me.",
    "skills": ["Acting", "Music", "Art", "English Literature"],
    "studying": "Mind Control"

我想创建一个表单来捕获上述用户信息。

用户架构中的 skills 字段任意长 - 我希望用户能够添加任意数量的技能。

如何动态呈现文本输入字段，并将这些动态呈现字段的每个输入发送到skills 数组？

这是我的整个Signup.js 文件：

// users Signin

import React, useState from 'react';
import Layout from '../core/Layout';
import API from '../config';

const Signup = () => 

  const [values, setValues] = useState(
    name: '',
    email: '',
    password: '',
    studying: '',
    skills: [],
    error: '',
    success: ''
  );

  const name, email, password, studying = values;


  const signup = (user) => 
    fetch(`$API/signup`, 
      method: "POST",
      headers: 
        Accept: 'application/json',
        "Content-Type": "application/json"
      ,
      body: JSON.stringify(user)
    )
    .then(response => 
      return response.json();
    )
    .catch(err => 
      console.log(err);
    );
  ;

  const clickSubmit = event => 
    event.preventDefault();
    signup(name, email, password, studying);
  ;

  const handleChange = name => event => 
    setValues(...values, error: false, [name]: event.target.value);
  ;



  const signUpForm = () => (
    <form>
        <div className="form-group">
            <label className="text-muted">Name</label>
            <input onChange=handleChange('name') type="text" className ="form-control" />
        </div>

        <div className="form-group">
            <label className="text-muted">Email</label>
            <input onChange=handleChange('email') type="email" className ="form-control" />
        </div>

        <div className="form-group">
            <label className="text-muted">Password</label>
            <input onChange=handleChange('password') type="password" className="form-control" />
        </div>

        <div className="form-group">
            <label className="text-muted">Studying</label>
            <input onChange=handleChange('studying') type="text" className ="form-control" />
        </div>

        <div>
            <div>createInputs()</div>
            <button onClick=addSkill>Add</button>
        </div>

        <button onClick=clickSubmit className="btn btn-primary">
          Sign Up
        </button>

    </form>
  );


  return(
  <Layout 
    title="Signup" 
    description="Join today."
    className="container col-md-8 offset-md-2">
      signUpForm()
      JSON.stringify(values)
  </Layout>
  );
;

export default Signup;

【参考方案1】：

您只需要使用.map() 遍历数组即可呈现与每个技能对应的输入。然后设置一些事件处理程序，让您可以通过将另一个项目添加到数组中来更新该技能并创建新技能。

查看工作沙箱：https://codesandbox.io/s/festive-bhaskara-gdxwm

import React,  useState, useEffect  from "react";

const User = ( data ) => 
  const [user, setUser] = useState(
    name: "",
    role: "",
    email: "",
    password: "",
    about: "",
    skills: [],
    studying: ""
  );

  const createInputs = () => 
    return user.skills.map((skill, idx) => 
      return (
        <div>
          <input value=skill onChange=e => updateSkill(e, idx) />
        </div>
      );
    );
  ;

  const updateSkill = (e, index) => 
    const userCopy =  ...user ;
    userCopy.skills[index] = e.target.value;
    setUser(userCopy);
  ;

  const removeSkill = index => 
    const userCopy =  ...user ;
    const userCopySkills = [...userCopy.skills];

    userCopySkills.splice(index, 1);

    setUser(
      ...userCopy,
      skills: [...userCopySkills]
    );
  ;

  const addSkill = () => 
    setUser(prevState => 
      return 
        ...prevState.user,
        skills: [...prevState.skills, ""]
      ;
    );
  ;

  useEffect(() => 
    console.log(user);
  , [user]);

  return (
    <div>
      <div>createInputs()</div>
      <button onClick=addSkill>Add</button>
    </div>
  );
;

export default User;

我在那里输入useEffect() 只是为了向您展示技能数组正在更新。如果你愿意，你可以把它取下来。