react 如何将子组件的值暴露让父组件获取到？

Question

这是父组件中input所在

<FormItem {...formItemLayout} label="父级ID" >
            <SelectParentId id="pIdselect" onChange="onchangeFn" {...getFieldProps('pIdselect')} />
            <Input hidden id="pid" {...getFieldProps('pId')} />
          </FormItem>

这是子组件，获取相应的数据

constructor(props) {
    super(props);
    this.state = {
      options: [],
    }
  }
  conponentDideMount() {
  }
  /**
   * 当选择框里内容变化时查询数据
   * @param e
  */
  handleChange(value) {
    let options;
    if ((value !== null) && (value.length < 2)) {
      printLog("value.length------------------" + value.length);
    } else {
      printLog("value.length>2:" + value.length);
      callAutocompconsteChoiceFn(value)
      .then((res) => {
        const datas = res.data;
        printLog("datas================"+JSON.stringify(datas));
        options = datas.map((item) => {
          const ids = item.id.toString();
          const dictTypeSstrings = item.dictType.toString();
          const propKeyStrings = item.propKey.toString();
          const labelKeyStrings = item.labelKey.toString();
          const joints = `${dictTypeSstrings}-${propKeyStrings}-${labelKeyStrings}-${ids}`;
          return <Option key={ids} value={joints}>{joints}</Option>;
        });
        this.setState({ options });
      });
    }
  }
  render() {
    const self = this;
    return (
      <Select
        combobox
        style={{ width: '100%' }}
        onChange={(options) => this.handleChange(options)}
        filterOption={false}
        placeholder="父级ID"
      >
          {this.state.options}
      </Select>
    )
  }

现在我无法拿到子组件中的数据到父组件中，即是在父组件中红无法通过
pId: getFieldValue('pId'),拿到数据，如何才能将子组件的数据暴露给父组件以让其获取到呢

Answer 1

React 设计中，不推荐父组件直接访问或操作子组件的。这样违背单向数据的思想，而且无法保证数据同源。

通常是子组件在完成操作后，通过触发一个props传递过来的的callback，在父级获取。

况且父子组件传值，最好的放法就是通过props。

Answer 2

react不是通过id来获得组件的，你需要给子组件添加ref属性，比如ref="childComponent"

然后在父组件中通过this.refs.childComponent就能访问到子组件了。

文档中说要注意访问子组件的时候确认子组件的状态（是否加载完成等等）

具体通过refs访问到子组件之后能看到什么东西自己console.log()吧

Answer 3

用 callback

Answer 4

你用的ant.design吧?
FormItem里如果是自定义组件，需要有一个通知父组件子组件值更新的回调方法，通过回调方法去setFieldValue，然后才能取到。

所以你的问题不太对，这是是框架的处理问题，不是react的通用问题。

Answer 5

callback

Answer 6

父组件弄一个函数改变自身的状态 把这个函数传给子组件，子组件触发条件时把父组件需要获取的值当做参数进去