将组件的特定元素的 <span> 更改为 <input>

Question

我想将标记更改为并构建一个表单来编辑触发了 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;

Answer 1

您正在切换 student 对象上的布尔属性 student.edit，但将 student.onEdit 传递给 student 组件上的 edit 属性。

<Student 
  ...Other properties
  edit={student.edit}
/>