[英]Updating the parent component's state, from a child-component
無法正確更改道具父級。
我不知道該怎么做才對。
我將非常感謝任何幫助。
class ScheduleEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
times : document.getElementsByClassName('schedule')[0].value.split(' '),
items : [],
hour : [],
minute : []
};
}
updateItems(times) {
this.setState({times : times});
}
updateHM(time,val) {
debugger;
if(time == 'hour') {
this.setState(hour : val);
} else if(time == 'minute') {
debugger;
this.setState(minute : val);
}
}
render() {
this.state.items = [];
this.state.hour = [];
this.state.minute = [];
for (const [index, hm] of this.state.times.entries()) {
let hour = hm.split(':')[0];
this.state.hour.push(hour);
let minute = hm.split(':')[1];
this.state.minute.push(minute);
this.state.items.push(
<React.Fragment key={index}>
<Button className = 'remove-time'
title = 'x'
times = {this.state.times} updateItems={(e) => this.updateItems(e)}/>
<HM refs = 'hour' time = {this.state.hour[index]} className = 'hour' indexHour = {index} updateHM = {(e) => this.updateHM()}/>
<HM refs = 'minute' time = {this.state.minute[index]} className = 'minute' indexMinute = {index} updateHM = {(e) => this.updateHM()}/>
<Button className = 'add-time'
title = '+'
times= {this.state.times}
updateItems={(e) => this.updateItems(e)}/>
<br/>
</React.Fragment>
)
}
return (
<React.Fragment>
{this.state.items}
</React.Fragment>
)
}
}
class HM extends React.Component {
constructor(props) {
super(props);
}
click(e) {
this.props.updateHM;
debugger;
let HM = e.target.className;
let val = e.target.valueAsNumber;
debugger;
this.props.updateHM(HM,val)
}
render() {
return (
<input type='number'
className = {this.props.className}
value={this.props.time}
onChange={(e) => this.click(e,this.props.time)}/>
)
}
}
您不能直接訪問和修改父元素的道具。 相反,您必須將一個函數(修改父元素的狀態)從父元素傳遞給子元素,然后在子元素中調用該函數。
父元素:
<HM ... updateHM={(time, val) => this.updateHM(time, val)} />
子元素:
click(e, time) {
...
this.props.updateHM(this.props.refs, time);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.