Passing function value from parent to child

Question

I'm building a check builder, I have multiple Parent components (forms) that display their inputs on a Child component (check layout).

This is my parent component:

import React from 'react';
import './../App.css';
import Check from './Check';

class BusinessAddress extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: {
      name: 'BusinessAddress',
      a: '',
      b: '',
      c: '',
      d:  '',
      e: '',
      f: '',
      g: '',
      h: ''
    }};

  }

  handleComponentName = name => {
    //console.log('handleComName', name)
    return this.state.name === name;
  }

  handleChange(property, event) {
    console.log(event.target.value);
    const text = {...this.state.text};
    text[property] = event.target.value;
    this.setState({text: text});
  }

  handleSubmit(event) {
    console.log(this.state.text.e);
  }

  render() {

    return (
      <div>
      <div className="form-box">
        <h3>Business Address</h3>
        <label>Business Name</label>
        <input type="text" placeholder="Business Name" value={this.state.text.a} onChange={this.handleChange.bind(this, 'a')} maxLength="30" />
        <label>Name Line 2</label>
        <input type="text" placeholder="Business Name Line 2" value={this.state.text.b} onChange={this.handleChange.bind(this, 'b')} maxLength="90" />
        <label>Street Address</label>
        <input type="text" placeholder="Street Address" value={this.state.text.c} onChange={this.handleChange.bind(this, 'c')} maxLength="30" />
        <label>Address Line 2</label>
        <input type="text" placeholder="Street Address Line 2" value={this.state.text.d} onChange={this.handleChange.bind(this, 'd')} maxLength="30" />
        <label>City</label>
        <input type="text" className="short" placeholder="City" value={this.state.text.e} onChange={this.handleChange.bind(this, 'e')} maxLength="30" />
        <label>State</label>
        <input type="text" className="short" placeholder="State" value={this.state.text.f} onChange={this.handleChange.bind(this, 'f')} maxLength="30" />
        <label>Postal</label>
        <input type="text" className="short" placeholder="Postal" value={this.state.text.g} onChange={this.handleChange.bind(this, 'g')} maxLength="30" />
        <label>Phone (optional)</label>
        <input type="text" className="short" placeholder="Phone" value={this.state.text.h} onChange={this.handleChange.bind(this, 'h')} maxLength="30" />
        </div>

      <Check data={this.state.text} handleParent={this.handleComponentName}/>

      </div>
    )
  }

}

export default BusinessAddress;

This is my child component:

import React from 'react';
import './../App.css';

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

  render() {

    const data = Object.values(this.props.data);

    if(this.props.handleParent('BusinessAddress')) {

    }


    return (
      <div>

        { data.map((item, index) => <li key={index}>{item}</li>) }

        <div id="Address"></div>
        <div id="Bank-Info"></div>

      </div>
    )
  }
}



export default Check;

I'm trying to map the data to a specific div based on which parent the data is coming from. Right now all that I'm getting from the child is the returned function, but no return value?

Thanks in advance!

Answer 1

<input type="text" placeholder="Business Name" value={this.state.text.a} onChange={this.handleChange.bind(this, 'a')} maxLength="30" />

Change this to this

<input type="text" placeholder="Business Name" value={this.state.text.a} onChange={(e) => this.handleChange(e, 'a')} maxLength="30" />

also change this

handleComponentName = name => {
//console.log('handleComName', name)
return this.state.name === name; }

to

this.state.text.name === name;

here is the demo

Answer 2

尝试像这样绑定onchange

onChange={(event) => this.handleChange('h', event)}