如何将参数发送回作为param传递的函数

Question

我是react.js新手，很难理解父级子组件通信。我有一个状态组件，调用炊具和无状态组件调用计划。我正在传递一个改变的功能，以安排从烹饪坑作为道具。

state = {
        schedule : [
            {
                id:'01',
                shift:"Morning UpStairs",
                Monday:'X1',
                Tuesday:'',
                Wednesday:'',
                Thursday:'',
                Friday:''
            },
            {
                id:'02',
                shift:"Morning Down Stairs",
                Monday:'X2',
                Tuesday:'',
                Wednesday:'',
                Thursday:'',
                Friday:''
            },
            {
                id:'03',
                shift:"Morning Parking Lot",
                Monday:'',
                Tuesday:'',
                Wednesday:'',
                Thursday:'',
                Friday:''
            },

        ],
    };
let mapSchedule = this.state.schedule.map((item,i)=>{
            return <Schedule schedule={item} key={item.id} changed={(event,day)=>this.onEmpChanged(event,item.id,day)}/>
        });

在调度组件中，我希望将值设置为状态对象的每一天。

<Col>
                    <select value={props.schedule.Monday} onChange={props.changed('monday')}>
                        <option value=""></option>
                        <option value="X1">X1</option>
                        <option value="X2">X2</option>
                        <option value="X3">X3</option>
                        <option value="X4">X4</option>
                        <option value="X5">X5</option>
                        <option value="X6">X6</option>
                        <option value="X7">X7</option>
                    </select>
                </Col>

我试图通过更改操作将这一天传递给父级，以便知道应该更新哪个日期，但它不起作用。请纠正我。

Answer 1

在父组件中

  changed = (day,item)=>{
    console.log(item.id,day)
}
render() {

    return(
        
        <div>
            {
                      this.state.schedule.map(item=> <Schedule schedule={item} key={item.id} changed={this.changed}/>
                    )
            }
        </div>
        )
}

在子组件中

export default function Schedule(props) {
return (
    <div>
        
                <select value={props.schedule.Monday} onChange={()=>props.changed('monday',props.schedule)}>
                    <option value=""></option>
                    <option value="X1">X1</option>
                    <option value="X2">X2</option>
                    <option value="X3">X3</option>
                    <option value="X4">X4</option>
                    <option value="X5">X5</option>
                    <option value="X6">X6</option>
                    <option value="X7">X7</option>
                </select>
        
    </div>
)

}