하위 구성 요소의 업데이트 상태에 대한 변경 이벤트

하위 구성 요소의 업데이트 상태에 대한 변경 이벤트

React 폼(ES6 구문)을 구현하고 각 필드의 onChange 이벤트를 상태 업데이트를 담당하는 컨트롤러 부모 컴포넌트에 전달하는 방법을 알아보려고 합니다.이것은 표준 HTML 요소에서는 정상적으로 동작합니다만, 저는 Datepicker(https://www.npmjs.com/package/react-bootstrap-date-picker)를 날짜 필드에 미리 등록하려고 하고 있습니다만, 같은 방법으로 이벤트를 부모에게 바로 전달할 수 없습니다.이 문제를 해결할 수 있는 간단한 방법이 있을까요?

컨트롤러 컴포넌트

   class Parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {job: ''} 
    }

    setJobState(event) {
        var field = event.target.name;
        var value = event.target.value;
        this.state.job[field] = value;
        this.setState({job: this.state.job});
    }


    render () {
        return <Child onChange={this.setJobState.bind(this)} />
    }
}

자 컴포넌트

class Child extends React.Component {
    constructor (props) {
        super(props);

    }

    render () {
        <form>
         <input type="text" name="jobNumber" onChange={this.props.onChange} /> 
         <DatePicker name="dateCmmenced" onChange={this.props.onChange}  />
        </form>
    }
}

그onChange의 핸들러DatePicker표준 브라우저에서는 호출되지 않습니다.change이벤트, 단value그리고.formattedValue인수로써.다른 등록 방법을 권장합니다.onChange의 핸들러Child각 입력 필드의 이벤트를 변환하는 컴포넌트:

컨트롤러 컴포넌트

class Parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {} 
    }

    onChange(field, value) {
        // parent class change handler is always called with field name and value
        this.setState({[field]: value});
    }


    render () {
        return <Child onChange={this.onChange.bind(this)} />
    }
}

자 컴포넌트

class Child extends React.Component {
    constructor (props) {
        super(props);
    }

    onFieldChange(event) {
        // for a regular input field, read field name and value from the event
        const fieldName = event.target.name;
        const fieldValue = event.target.value;
        this.props.onChange(fieldName, fieldValue);
    }

    onDateChange(dateValue) {
        // for a date field, the value is passed into the change handler
        this.props.onChange('dateCommenced', dateValue);
    }

    render () {
        return <form>
          <input type="text" name="jobNumber" onChange={this.onFieldChange.bind(this)} /> 
          <DatePicker onChange={this.onDateChange.bind(this)}  />
        </form>
    }
}

import React from 'react'
export default {
  [formData, setFormData] = React.useState({
    name: '',
    number: '',
    email: '',
    address: '',
    zip: ''
  })

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }
  
  return (
    <div>
      <input type='text' name='name' onChange={handleChange} />
      <input type='text' name='number' onChange={handleChange} />
      <input type='email' name='email' onChange={handleChange} />
      <textarea name='address' onChange={handleChange}></textarea>
      <input type='text' name='zip' onChange={handleChange} />
    </div>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

언급URL : https://stackoverflow.com/questions/40795906/onchange-event-for-react-child-component-to-update-state