Question

我正在构建一个检查生成器，我有多个父组件（窗体），它们在子组件（检查布局）上显示其输入。

这是我的父组件：

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;

这是我的孩子部分：

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;

我正在尝试根据数据来自哪个父级将数据映射到特定的div。现在我从孩子那里得到的只是返回的函数，但是没有返回值？

谢谢！

Answer 1

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

将此更改为此

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

也更改此

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

到

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

here is the demo

Answer 2

尝试像

那样绑定onchange

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

将函数值从父级传递到子级

2 个答案: