Communication between parent component and multiple child components

  node.js, question

The current problem is this:

A form parent component has multiple input input input boxes, but each input input box is a packaged component. Now my requirement is to obtain the input values of these multiple input components and pass them into the state of the form parent component.

I know that one of the ways the parent component obtains the data of the child component can be that the parent component passes in a method of its own to the child component, and the child component calls the method passed in by the parent component after obtaining the value, passing in the value as a parameter.

But now there are multiple input subcomponents, how do you handle it to pass the values of the subcomponents into a method of the parent component at the same time?

The parent component (the form elements input and textarea were used before, and the encapsulated component cannot obtain the data correctly):

class Activity extends React.Component{
 
 constructor(){
 super();
 this.state={
 title : null,
 brief : null
 };
 bracket
 
 handleChange(){
 this.setState({
 title : this.refs.title.value,
 brief : this.refs.brief.value
 });
 bracket
 
 render(){
 return(
 
 <form className="activity_publish_main" action="#" method="post">
 
 <Input
 ref="title"
 Placeholder= "Please enter the activity title"
 onChange={ this.handleChange.bind(this) }
 />
 
 <Textarea
 ref="brief"
 Placeholder= "Introduction to one or two sentences of this activity"
 onChange={ this.handleChange.bind(this) }
 />
 
 {/* Cover Upload, Preview */}
 <ImgCrop title={ this.state.title } brief={ this.state.brief }/>
 
 </form>
 );
 bracket
 };

Subassembly:

class Input extends React.Component{
 
 render(){
 return(
 <input
 type={ this.props.type }
 className="input_component"
 placeholder={ this.props.placeholder }
 />
 );
 };
 };

Component

<Input
 Placeholder= "Please enter the activity title"
 onChange={ (ev) => this.handleChange(ev, 'title') }
 />

Method

handleChange(ev, type){
 const { value } = ev.currentTarget;
 this.setState({
 [type] : value,
 });
 bracket