Передача от родителя к дочерней функции onChange, которая не работает

Question

Есть родительский компонент, у которого есть функция handleChange, я передаю дочернему элементу эту функцию.

И предоставить для входных файлов, то есть ошибка с входными файлами, я не могу изменить значения вообще.

ParentComp:

 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>
)

ChildComponent:

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}?

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