如何更改 React 组件的属性？

Question

我是 React 新手，最近开始研究它。我知道我们不能使用 props 更改组件属性。

我想知道如何更改组件的属性？ 以下是我的代码：

Courses.jsx

function Courses(){


return (
    <div className="courses">
        <h1>Ongoing Courses</h1>
        <div className="row">
        
        {CourseData.map((value,index)=>{
            return   (
              
                  <div className="col-md-3">
                  <Card title={value.title}  completed={value.completed} content={value.content} value="Resume !" key={index} id={index} />
                  </div>
             
            );
        })}
    </div>
    </div>
);
}

在上面我有一个名为 courseData 的数据数组，我将它映射到 Card 组件上。

卡片.jsx：

function Card(props){

function handleClick(){
  
}
return (
    <div className="card">
        <div className="card-body">
            <h2 className="card-title">{props.title}</h2>
            {props.content}
            <br/>
        <button  className="btn btn-danger" > {props.value}</button>
        </div>
    </div>
);
}

CourseData 具有以下属性：

courseData : [{
key, 
title,
completed
content}]

我只是希望当出现的按钮是卡片时被点击，然后 courseData 的完成属性更改为通过道具传递的一些不同的值。

我尝试了很多，但做不到。

任何有关这方面的帮助都会对我有所帮助。

courseData.jsx：

const notes = [{
key: 1,
title: "some Text",
completed:false,
content: "some Text"
},
 {
    key: 2,
   title: "some Text",
completed:false,
content: "some Text"
 }]
export default notes;

Answer 1

将 CourseData 添加到 Courses 组件的状态。然后添加一个方法来调整那里的数据。通过在 Card 组件中单击按钮时将调用的 props 传递方法：

function Courses() {
  const [courseData, setCourseData] = useState(CourseData);
  const updateCourseData = (index) => {
    courseData.splice(index, 1);  
    setCourseData(courseData);
  }

  return (
    <div className="courses">
      <h1>Ongoing Courses</h1>
      <div className="row">
    
      {courseData.map((value,index)=>{
        return   (
          
              <div className="col-md-3">
              <Card title={value.title} updateCourseData={updateCourseData}  completed={value.completed} content={value.content} value="Resume !" key={index} id={index} />
              </div>
         
          );
      })}
      </div>
      </div>
   );
}

在 Card.jsx 中：

<button onClick={() => props.updateCourseData(props.id)}  className="btn btn-danger" > {props.value}</button>

Answer 2

function Courses(){
const [coursesData, setCoursesData] = useState(CourseData)

return (
    <div className="courses">
        <h1>Ongoing Courses</h1>
        <div className="row">
        
        {coursesData.map((value,index)=>{
            return   (
                  <div className="col-md-3">
                  <Card coursesData={coursesData}  setCoursesData={setCoursesData} title={value.title}  completed={value.completed} content={value.content} value="Resume !" key={index} id={index} />
                  </div>
            );
        })}
    </div>
    </div>
);

function Card({id,title,value,content,coursesData,setCoursesData }){

function handleClick(e){
  e.preventDefault()
  setCoursesData(coursesData => {
      const data = coursesData
      data.splice(id,1,{
          title: title,
          completed: value,
          content: content,
          key: id
      })
      return data
  })
}
return (
    <div className="card">
        <div className="card-body">
            <h2 className="card-title">{title}</h2>
            {content}
            <br/>
        <button onClick={handleClick} className="btn btn-danger">{value}</button>
        </div>
    </div>
);