javascript - 从父级传递给子级 onChange 函数不起作用

Question

父组件具有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 >

也许问题出在这个属性 value={recieveDate} 上？

Answer 1

您可以使用回调函数来处理它。

在您的父组件中替换以下行:

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'}
      />