我想将标记更改为并构建一个表单来编辑触发了 onClick 事件的学生的元素。它应该仅针对单击其编辑按钮的跨度将跨度更改为输入。但是,整个元素都被渲染为输入。有没有人对此问题有任何想法以及如何解决?
App.js:
import React, { Component } from 'react';
import appStyles from './App.module.css';
import Student from './Student/Student';
import student from './Student/Student';
import { faSdCard } from '@fortawesome/free-solid-svg-icons';
class App extends Component{
state = {
student : [
{name: "John", age: 23, field: "Computer Science", edit: false},
{name: "Joe", age: 20, field: "Geography", edit: false},
]
}
editToggleHandler = (event, index) => {
event.preventDefault();
const student = {...this.state.student[index]};
const students = [...this.state.student];
if(!student.edit)
{
student.edit = true;
}
else
{
student.edit = false;
}
students[index] = student;
this.setState({student: students});
}
render(){
let students = null;
students = (
<div id = "students">
{(this.state.student.length) ?
this.state.student.map((student, index) => {
return <Student key = {student.index}
name = {student.name}
age = {student.age}
field = {student.field}
edit = {student.onEdit}
onDelete = {() => this.itemDeleteHandler(index)}
onEdit = {(event) => this.editToggleHandler(event, index)}/>
}) : <div className = {appStyles.notAvailable}> <p>No Students Found</p> </div>
}
</div>
)
return (
<div className= {appStyles.App}>
<div className = {appStyles.studentsContainer}>
<h2 className = {appStyles.title}>Students List</h2>
<div className = {appStyles.studentsComponent}>
<div className = {appStyles.formContainer}>
<form onSubmit = {this.studentSubmitHandler} className = {appStyles.form}>
<input type = "text" name = "name" placeholder = "Name"/>
<input type = "text" name = "age" placeholder = "Age"/>
<input type = "text" name = "field" placeholder = "Field of Study"/>
<button type = "submit" className = {appStyles.formButton}>Submit</button>
</form>
</div>
{students}
</div>
</div>
</div>
);
}
}
export default App;
学生组件:
import React from 'react';
import studentStyles from './Student.module.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit } from '@fortawesome/free-solid-svg-icons';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
const student = (props) => {
const userEdit = <FontAwesomeIcon icon={faEdit} />
const Trash = <FontAwesomeIcon icon={faTrashAlt} />
const normalMode = (<div className = {studentStyles.student}>
<div className = {studentStyles.Container}>
<span>{props.name}</span>
</div>
<div className = {studentStyles.Container}>
<span>{props.age}</span>
</div>
<div className = {studentStyles.Container}>
<span>{props.field}</span>
</div>
<div className = {studentStyles.buttonsContainer}>
<button onClick = {props.onEdit} className = {`${studentStyles.button} ${studentStyles.buttonEdit}`}>{userEdit}</button>
<button onClick = {props.onDelete} className = {`${studentStyles.button} ${studentStyles.buttonRemove}`}>{Trash}</button>
</div>
</div>);
const editMode = (<div className = {studentStyles.student}>
<form>
<div className = {studentStyles.Container}>
<input type = "text" name = "name" value = {props.name} />
</div>
<div className = {studentStyles.Container}>
<input type = "text" name = "age" value = {props.age} />
</div>
<div className = {studentStyles.Container}>
<input type = "text" name = "field" value = {props.field} />
</div>
<div className = {studentStyles.buttonsContainer}>
<button onClick = {props.onEdit} className = {`${studentStyles.button} ${studentStyles.buttonEdit}`}>{userEdit}</button>
<button onClick = {props.onDelete} className = {`${studentStyles.button} ${studentStyles.buttonRemove}`}>{Trash}</button>
</div>
</form>
</div>);
return((props.edit == false) ? normalMode : editMode);
}
export default student;
答案 0 :(得分:1)
您正在切换 student 对象上的布尔属性 student.edit
,但将 student.onEdit
传递给 student 组件上的 edit
属性。
<Student
...Other properties
edit={student.edit}
/>