Question

我正在呈现一个包含一个复选框的子组件列表，当单击该复选框时，我想将该子组件移动到另一个div元素内。

这是我的应用看起来不错的图像。我想检查学生姓名并在“当前”子标题下向上移动他们。.

let ClassComp = (props) => {
  const { teacher, subject, students, day } = props.classOf

  const renderStudents = (students) => {
    if (students && students.length > 0) {
      return (
        <div>
          {students.map((student, index) =>
            <StudentCheckbox key={index} student={student} handleCheckboxClick={handleCheckboxClick} />
          )}
        </div>
      )
    } else {
      return <p style={{ margin: '10px' }} >No students registered.</p>
    }
  }

  const handleCheckboxClick = (elId) => {
    const presentStudentEl = document.getElementById('present-students')

    // move StudentCheckbox element inside this element ^
  }

  return (
    <div className="ui segment" style={segmentStyle} >
      <div className="content">
        <div className="ui medium header">{teacher} - {subject}</div>
        <div className="ui divider"></div>
        <div className="ui sub header">Students</div>
        <div className="ui tiny header">Present:
          <div id="present-students"></div>
        </div>
        <div className="ui tiny header">Absent:
          <div id="absent-students">
            {renderStudents(students)}
          </div>
        </div>
        <div style={{ marginBottom: '30px' }}>
          <button className="mini compact ui negative right floated button"
            onClick={() => setModalVisible(true)}>Delete Class
          </button>
          <Link to={`/todaysclass/edit/${props.classId}`} className="mini compact ui right floated button">Edit Class</Link>
        </div>
      </div>
    </div >
  )
}

const mapStateToProps = (state, ownProps) => {
  return { classOf: state.classes[ownProps.classId] }
}
export default connect(mapStateToProps, { deleteClass })(ClassComp)

这是我的孩子部分：

const StudentCheckbox = (props) => {
  const uniqId = idGenerator()
  return (
    <div className="field" style={{ margin: '5px' }}>
      <div className="ui checkbox">
        <input type="checkbox" id={uniqId} onChange={() => props.handleCheckboxClick(uniqId)} />
        <label htmlFor={uniqId}>{props.student}</label>
      </div>
    </div>
  )
}

Answer 1

在这种情况下，您需要为组件提供一个状态。看看文档：

https://reactjs.org/docs/state-and-lifecycle.html

因此，基本上，除了props（已“修复”）之外，您还有一个state，当您检查项目时，它会更改。

您的render方法将使用状态将这些项放在一个div或另一个div中。因此，您要做的就是使用setState来更改状态，然后render方法将重新绘制新状态。

Answer 2

您正在使用redux来管理状态。那很好。它有助于正确管理/处理数据。

在这种情况下，您要尝试装饰视图而不更改数据（在redux存储中）-不好，在反应中甚至没有意义。

渲染的组件/视图仅是MVC中 M odel（州）的[源自] V ie。在DOM中将某个元素从一个div移到另一个div（如果实现了这一点）不会更改[base]状态-重新渲染后，您将失去这些更改。

更新：

您应保持学生在商店中的存在（默认为false）。 您需要一个单独的操作（参数/有效载荷：classId，studentId），调用API（在操作中创建者以节省出席人数）和reducer 用于在redux存储中更改“标志”。

每个student将具有isPresent属性。您只需更改renderStudents即可同时渲染两个div（其他布尔参数和开头的适当过滤）。

如何在React中将子组件移到新的父组件？

2 个答案: