Reactjs 如何在 props 中將 arguments 右傳給 function

Question

我正在研究 The Odin Project 並嘗試編寫 CV 應用程序代碼 ( https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript/lessons/cv-application )。 我完成生物部分（姓名、電話、電子郵件）。 據我所知，工作經驗和教育成分基本相同。 所以我嘗試編寫工作體驗組件。 在我的 App 組件中，我聲明了添加另一個作業的方法（addJob 方法），以及根據 Job 組件中具有正確 ID 的數據更新 App state 的方法。 為了在應用程序中更新此數據，我為每個作業組件指定了唯一的 ID。 編寫 handleJobChange 方法的最佳做法是什么？

我嘗試從子組件向我的父組件發送數據。

應用組件

import React from 'react';
import Bio from './components/Bio'
import CV from './components/CV'
import Job from './components/Job'

class App extends React.Component {
  constructor() {
    super()

    this.handleBioChange = this.handleBioChange.bind(this)
    this.idGen = this.idGen.bind(this)
    this.handleJobChange = this.handleJobChange.bind(this)

    this.state = {
      bio_state: {name:'', phone:'', email:''},
      job: [{id:this.idGen(), company:'', position:'',tasks:'', start:'', until:''}]

    }
  }
  
  idGen() {
     return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
  }

  handleBioChange = (e) => {
    this.setState({
      bio_state: Object.assign(this.state.bio_state,{[e.target.name]: e.target.value})
    })
  }

  addJob = () => {
    this.setState(this.state.job.concat([
      {id:this.idGen(), company:'', position:'',tasks:'', start:'', until:''}
    ]))
  }

  handleJobChange = (e, id) => {
    this.setState(previousState => {
      console.log(e.target)
      console.log("id is ",id)
      let job = [...previousState.job]
      console.log(job)
      let indexOfJob = job.findIndex(job => job.id === id)
      console.log(indexOfJob)
      job[indexOfJob] = {...job[indexOfJob], [e.target.name]: e.target.value}
      return { job }
    })
  }

  render() {
    console.log('app state', this.state.bio_state)
    return (
      <div>
        <Bio onBioChange={this.handleBioChange} />
        {
            this.state.job.map((item) => (
                <Job id={item.id} onJobChange={this.handleJobChange}/>
            ))
        }
        <CV name={this.state.bio_state.name} phone={this.state.bio_state.phone} email={this.state.bio_state.email} jobs={this.state.job}/>
      </div>
    )
  }
}

子組件

import React from 'react'

class Job extends React.Component{
  constructor(props){
    super(props)
  }

  render(){
    const id = this.props.id
    return(
      <div id={this.props.id}>
        <label for='company'>Company:</label>
        <input name='company' onChange={(id=this.props.id)=>this.props.onJobChange(id)}></input>
        
        <label for='position'>Position:</label>
        <input name='position' onChange={()=>this.props.onJobChange(id)}></input>
        
        <label for='tasks'>Tasks:</label>
        <input name='tasks' onChange={()=>this.props.onJobChange(this.props.id)}></input>
        
        <label for='start'>Date from:</label>
        <input name='start' onChange={()=>this.props.onJobChange(this.props.id)}></input>
        
        <label for='until'>Date until:</label>
        <input name='until' onChange={()=>this.props.onJobChange(this.props.id)}></input>
      </div>
    )
  }
}

export default Job

我不知道該怎么做，好像我在帶參數的子組件中錯誤地使用了 function。 請幫忙？ 我很絕望=（

Answer 1

我弄明白了。 我像這樣更改我的應用程序組件 handleJobChange 方法

handleJobChange = (id, key,value) => {
    this.setState(previousState => {
      console.log("id is ", id)
      console.log("key is ", key)
      console.log("val is ", value)
      let job = [...previousState.job]
      console.log(job)
      let indexOfJob = job.findIndex(job => job.id === id)
      console.log(indexOfJob)
      job[indexOfJob] = {...job[indexOfJob], [key]: value}
      return { job }
    })
  }

在我的工作組件中，我像這樣改變

class Job extends React.Component{
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange=(e)=>{
    const key = e.target.name
    const value = e.target.value
    const id = this.props.id

    this.props.onJobChange(id, key, value)
  }

  render(){
    const id = this.props.id
    return(
      <div id={this.props.id}>
        <label for='company'>Company:</label>
        <input name='company' onChange={this.handleChange}></input>
        
        <label for='position'>Position:</label>
        <input name='position' onChange={this.handleChange}></input>
        
        <label for='tasks'>Tasks:</label>
        <input name='tasks' onChange={this.handleChange}></input>
        
        <label for='start'>Date from:</label>
        <input name='start' onChange={this.handleChange}></input>
        
        <label for='until'>Date until:</label>
        <input name='until' onChange={this.handleChange}></input>
      </div>
    )
  }
}

它的工作！