如何从子组件中获取父级的值（来自输入）

Question

我正在创建一个React应用程序，其中我有不同的过滤器用于不同的页面。我想在不同的子组件中潜入我的整个提交表单但是我无法将父组件中的子组件的值链接到我的代码下面。

家长代码：

import React, { Component } from 'react';
class Dash extends Component {
    constructor(props) {
    super(props);
    this.state = {
      operator: null
    };
    this.onChange = this.onChange.bind(this);

  }
  onChange(e){
    this.setState({[e.target.name]:e.target.value});
   }
  render() {
    return (
              <div className="card-body">
                  <Operator onChange={this.operator} />
              </div>
    );
  }
}
export default Dash;

儿童代码：

import React, { Component } from 'react';
class Operator extends Component {
    constructor(props) {
    super(props);
    this.state = {
      operator: null
      };
      this.onChange = this.onChange.bind(this);
  }
  onChange(e){
    this.setState({[e.target.name]:e.target.value});
   }
  render() {
    const { data } = this.state;
    return (
              <div className="btn-group">
                <select className="m-wrap" id="operator-list" name="operator" onChange={this.onChange} >
                <option value="">- Choose Operator -</option>
                <option value="Digi">Digi</option>
                <option value="digi">digi</option>
                </select>
              </div>
    );
  }
}
export default Operator;

我只想将父类运算符值与子类中的select相关联。

Answer 1

您需要在父组件中将onChange={this.operator}更改为onChange={this.onChange}

在孩子身上

onChange(e) {
    this.props.onChange(e)    
  }

这样，您将onchange函数传递给子类，并从子组件调用父组件。

Demo