使用 props 和 useState Hook 从 Child 中的输入更新父组件上的 state

Question

I am creating a multistep form using antd components, which needs to pass input values from each step Child component to the Parent's state.

Parent component:

 import React, { useState } from 'react' import { Steps, Button, message } from 'antd' import { SaveOutlined } from '@ant-design/icons' import Step1 from './Step1' import Step2 from './Step2' import Step3 from './Step3' const Step = Steps.Step const RegisterClient = () => { const [current, setCurrent] = useState(0) const [values, setValues] = useState({ companyName: '', phone: '', address: '', address2: '', postalCode: '', country: '', stateProvince: '', city: '' }) const handleOnChange = (e) => { const { name, value } = e.target setValues({...values, [name]: value }) } return ( <div className="steps-client"> <h2>Register New Client</h2> <Steps current={current}> <Step title='Company Billing Details' /> <Step title='Client Admin' /> <Step title='Billing Contact' /> </Steps> <div className="steps-content"> {current === 0 && ( <Step1 handleOnChange={ handleOnChange } values={ values } /> )} {current === 1 && ( <Step2 /> )} {current === 2 && ( <Step3/> )} </div>. . .

The problem comes when passing handleOnChange and values as props to the child component <Step1/>

Child component:

 import React from 'react' import { Form, Input, Row, Col } from 'antd' const Step1 = (props) => { const { handleOnChange, values } = props return ( <Form > <Row gutter={[36, 14]}> <Col span={12} > <Form.Item name='companyName' label="Company Name" rules={[ { required: true, message: 'Company Name is required.' } ]} > <Input name='companyName' placeholder= 'Company Name' value= {values.companyName} onChange= {handleOnChange('companyName')} /> </Form.Item>. . .

I get this error

Line 5:11:   'handleOnChange' is missing in props validation      react/prop-types
Line 5:27:   'values' is missing in props validation              react/prop-types
Line 24:29:  'values.companyName' is missing in props validation  react/prop-types

What am I missing?

Answer 1

Change the signature of the Step1 component to:

...
import PropTypes from 'prop-types'

const Step1 = ({handleOnChange, values}) => {
...
}

You might need to install prop-types , then validate the props:

Step1.propTypes = {
  handleOnChange: PropTypes.func,
  values: PropTypes.object
}