[英]How to manipulate the DOM inside of map function using onChange event on one of the checkboxes with react hooks
So first I import really simple "database" object from a different file which has a students array property in it. 因此,首先我从另一个文件中导入一个非常简单的“数据库”对象,该文件中包含一个students数组属性。 After that I map through the students array to display all of the students on the window object.
之后,我将遍历students数组以在window对象上显示所有学生。 All went well until I tried to dynamically change class name on one of the div tags inside of map function every time when state for status is changing to true I want to display information otherwise that div should stay invisible.
一切顺利,直到每次当状态从status更改为true时,我都试图在map函数内部的div标签之一上动态更改类名时,我要显示信息,否则div应该保持不可见。 After implementing the code below and trying to tick the box I am getting error "Cannot create property '0' on boolean 'true'".
在实现以下代码并尝试在框上打勾后,我得到了错误“无法在布尔值'true'上创建属性'0'”。 Please tell me what I am doing wrong.
请告诉我我在做什么错。 Thank You for Your interest in that case.
感谢您对此案的关注。
import React,{ useState,useEffect } from 'react' import db from './db' import './App.css' const App = () => { const [status,setStatus] = useState(database.map((student) => { return student.isChecked })) return db.students.map(({name,id,email,isChecked}, index) => { return ( <form key={id} className='form'> <h2> {name} </h2> <select name='student_attendance' className='form__dropdown' defaultValue='present'> <option value='present'> present </option> <option value='absent'>absent</option> </select> <div> <label htmlFor={id}>Left early</label> <input type='checkbox' name='leftEarly' id={id} /> </div> <div> <label htmlFor={email}>Arrival late</label> <input type='checkbox' name='arrivalLate' id={email} onChange= {(event) => { setStatus(status => status[index] = event.currentTarget.checked ) }}/> </div> <div className={status[index] ? 'visible' : 'invisible'> <p>time: </p> </div> </form> ) }) } export default App
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
The argument to setStatus
should be either: setStatus
的参数应为:
status
status
的新价值 or 要么
status
and returns the new version status
的先前版本并返回新版本 You are passing it a function that modifies the received value of status, and then returns a boolean value. 您正在向它传递一个函数,该函数修改状态的接收值,然后返回一个布尔值。 So it appears that
status
is changing to that boolean value, and then the status[index]
in your className
expression is essentially evaluating true[0]
, which results in the error. 因此看来
status
正在更改为该布尔值,然后您的className
表达式中的status[index]
本质上是在评估true[0]
,从而导致错误。
To fix this, fix your use of the setStatus()
function: 要解决此问题,请修复对
setStatus()
函数的使用:
setStatus(status => [
...status.slice(0, index),
event.currentTarget.checked,
...status.slice(index + 1)
])
You may also want to try this, which doesn't rely on the event
properties: 您可能还想尝试一下,它不依赖于
event
属性:
setStatus(status => [
...status.slice(0, index),
!status[index],
...status.slice(index + 1)
])
Or even this: 甚至这个:
setStatus(status =>
status.map((x, i) => (i === index) ? !x : x)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.