[英]How do I add input values to an object and display the results in React?
I'm working on a CV Application in React
and part of the process is adding your previous Education and displaying it so a potential employer can see it.我正在
React
中处理 CV 应用程序,该过程的一部分是添加您以前的教育并显示它,以便潜在的雇主可以看到它。 I have an input set up so users can enter information and upon hitting save, the values are sent and displayed in a separate div.我设置了一个输入,这样用户就可以输入信息,点击保存后,这些值将被发送并显示在一个单独的 div 中。
This form also only shows up when I click the +Add Education button at the bottom.此表单也仅在我单击底部的+ 添加教育按钮时才会显示。
<form>
<label htmlFor="school">School</label>
<input type="text" name="school" onChange={(e) => this.setSchool(e.target.value)} />
<label htmlFor="study">Field of Study</label>
<input type="text" name="study" onChange={(e) => this.setStudy(e.target.value)} />
<button onClick={this.onSubmit} className="save">Save</button>
</form>
<button onClick={this.toggleForm} className="form-btn">
+ Add Education
</button>
I also have this onChange
event that's attached to each input
which takes the values from each input and displays them to a div.我还有这个附加到每个
input
的onChange
事件,它从每个输入中获取值并将它们显示到一个 div。
onChange={(e) => this.setSchool(e.target.value)}
Here is the code I'm using for both setSchool and setStudy.这是我用于 setSchool 和 setStudy 的代码。
class Education extends Component {
constructor(props) {
super(props);
this.state = {
school: "",
study: "",
showOutput: false,
};
setSchool = (value) => {
this.setState({ school: value });
};
setStudy = (value) => {
this.setState({ study: value });
};
I also have this code which is placed above my other jsx code.我也有这段代码,它位于我的其他 jsx 代码之上。
render() {
return (
<>
<div>
{this.state.showOutput && (
<div className="experience">
<p>{`School: ${this.state.school}`}</p>
<p>{`Field of Study: ${this.state.study}`}</p>
</div>
)}
This code exists for the purpose of displaying only when the setSchool
and setStudy
values aren't empty.此代码的存在目的是仅在
setSchool
和setStudy
值不为空时显示。 When the user fills them out and clicks save, it displays in a div above the form.当用户填写并点击保存时,它会显示在表单上方的 div 中。
Now here's where I need help现在这是我需要帮助的地方
Everything about this code works as intended.这段代码的一切都按预期工作。 However, when I go to click +Add Education for the second time, the values are simply being overriden.
但是,当我 go 第二次单击+Add Education时,这些值只是被覆盖了。 So instead of having two separate divs like this:
所以不要像这样有两个单独的 div:
Div 1分区 1
School: University of Test学校:考大
Field of Study: Comp.研究领域:比较。 Sci
科学
Div 2分区 2
School: University of Test 2学校:考2大学
Field of Study: Comp.研究领域:比较。 Sci 2
科学2
I'm only getting one because the second div of inputted information is overriding the first.我只得到一个,因为输入信息的第二个 div 覆盖了第一个。
School: University of Test 2学校:考2大学
Field of Study: Comp.研究领域:比较。 Sci 2
科学2
I've been trying so solve this issue and the only thing I can think of is to add each input value to an object rather than just adding it to setState:我一直在努力解决这个问题,我唯一能想到的就是将每个输入值添加到 object 而不是仅仅将它添加到 setState:
const study = [
{
school: school,
fieldofStudy: fieldofStudy,
},
];
But I can't seem to figure out how to add the values to this object and then display the results.但我似乎无法弄清楚如何将值添加到这个 object 然后显示结果。 I know if I displayed the results by looping through the array instead of
e.target.value
I could get them to show up but everything I've tried thus far hasn't worked.我知道如果我通过遍历数组而不是
e.target.value
来显示结果,我可以让它们显示出来,但到目前为止我尝试过的一切都没有奏效。
Add a state array to keep track of your school/study pairs ( this.state.education
, for example) and then add them with the button is pressed like:添加一个 state 数组来跟踪您的学校/学习对(例如
this.state.education
),然后按下按钮添加它们,如下所示:
setEducation = () =>{
this.setState((state)=>({education: [...state.education, {study: this.state.study, school: this.state.school}]}))
And then just loop through this.state.education
in your render然后在渲染中循环遍历
this.state.education
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.