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

如何从子组件中获取父项中的值（来自Inputs）

1 个答案: