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

Question

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

{
"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;

Answer 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()放在那里只是为了向你展示技能数组正在更新。如果你愿意，你可以把它取下来。