javascript - 从父母传递给孩子的onChange函数不起作用
问题描述
有一个具有handleChange功能的父组件,我将该功能传递给孩子。
并提供给输入文件,然后输入文件有错误,我根本无法更改值。
父比较:
handleChange = (e, data) => {
if (data && data.name) {
this.props.setFieldValue(data.name, data.value)
if (data.name === 'pay_rate') {
console.log('PAY_RATE: ', data)
}
}
}
return (
<Grid.Column width={8}>
<Segment raised>
<Header>
<p style={{ fontSize: '1.2rem' }}>
Church Mutual Worker\'s Compensation Claim
<span style={{ float: 'right' }}>{`Claim #${props.claim.claimNumber}`}</span>
</p>
</Header>
<Form onSubmit={handleSubmit}>
// Here called is Child component
<EditStandaloneClaimDetails
claim={props.claim}
loading={loading}
handleChange={props.handleChange}
/>
</Form>
<Comment currentClaim={props.currentClaim} />
</Segment>
</Grid.Column>
)
子组件:
const EditStandaloneClaimDetails = ({ handleChange, claim, loading, testChange }) => {
if (!claim || loading) {
return null
}
const { noticeOnly, recieveDate, accountNumber } = claim
return (
<Segment
raised
style={{
backgroundColor: '#F0F0F0',
}}
>
<h5>Claim Details</h5>
<Form.Group >
<Form.Field>
// CANNOT ENTER A NEW VALUE FOR DATE INPUT FILED
<label>Date Received</label>
<DateInput
name={'recieveDate'}
placeholder="Date received"
value={recieveDate}
onChange={handleChange}
style={{ width: '65%' }}
dateFormat={'MM/DD/YYYY'}
/>
</Form.Field>
</Form.Group >
也许问题出在这个属性值 = {recieveDate} 上?
解决方案
您可以使用回调函数来处理它。
在您的父组件中替换以下行:
handleChange = (e, data) => {
//here you get the updated date
//add your logic
}
// Here called is Child component
<EditStandaloneClaimDetails
recieveDate = {'your date'}
claim={props.claim}
loading={loading}
handleChange={(event, data) =>this.handleChange(event,data)}
/>
在子组件中添加下面的函数,该函数负责回调父组件。
constructor(props){
super();
this.state = { recieveDate: prop.recieveDate };
}
HandleChange(event,value){
this.setState({ recieveDate})
this.props.handleChange(value,event.uid);
}
<DateInput
name={'recieveDate'}
placeholder="Date received"
value={recieveDate}
onChange={(event, value) =>this.HandleChange(event,data)}
style={{ width: '65%' }}
dateFormat={'MM/DD/YYYY'}
/>
推荐阅读
- ios - setupIntentConfirmation 成功后如何运行函数?
- python - 仅在变量中添加某些字段 - Python 函数 - Django - 视图
- c# - 如何使用服务器验证国际象棋移动?Winboard 和 Unity 2020.3
- python - 无法理解线性同余生成器的代码
- angular - 如果拦截器在先前的请求中失败,则 navigateByUrl 在 Safari 上似乎“不会发生”
- python - 想把这个数据放在两个字符串中
- java - 如果我想用多对一关系填充 List<> 类型的变量,自定义 SQL 查询应该是什么样子
- swift - Objective C/Swift 如何在嵌入式框架中在运行时抑制 API
- php - 如果值不正确,则 PHP 重定向
- rust - Rust:安全地终止线程池中正在运行的线程?