Question

我想要实现的目标：从嵌套元素中获取数据。

我是如何尝试实现它的：使用子级的ref属性在父级中获取该元素。不起作用，因为this.refs似乎只包含顶部组件中的refs，而不是嵌套组件。

SubmitStoryForm.jsx嵌套了组件TextInput.jsx，这是一个简单的<input />组件。

所以我的表单中有两个元素SubmitStoryForm.jsx：

<TextInput label="Story name" refer="titleInput" />
<textarea className="materialize-textarea" ref="bodyInput" />

refer属性是ref中TextInput属性的内容：

import React, {Component, PropTypes,} from 'react';

export default class TextInput extends Component {
  render() {
    const refer = this.props.refer;
    console.log(refer);
    const id = 'id_'+refer;
    const type = this.props.type;
    const col = this.props.col;
    const label = this.props.label;
    return (
      <div className=
        {col ? 'input-field col ' + col : 'input-field col s3'}>
          <input
            placeholder={this.props.placeholder}
            id={id}
            ref={refer}
            type={type ? type : 'text'} />
          {label ?
            <label for={id}>
              {this.props.label}
            </label> : ''}
      </div>
    )
  }
}

TextInput.propTypes = {
  refer: PropTypes.string.isRequired,
};

适用于textarea元素，因为ref属性是在父级中定义的。但是，当我将该责任传递给孩子时，TextInput，ref无效。

这是我应该如何构建我的代码吗？

我尝试时代码失败：

this.refs.titleInput.value

<{1>}中的

，但

SubmitStoryForm.jsx

工作正常。

错误：

this.refs.bodyInput.value

Answer 1

虽然您可以使用refs授予父组件对子组件数据的访问权限，但您确实不应该这样做。（Netflix，反应的重度用户，甚至有一个规则“没有参考，永远”参见this video，从大约10米开始）。在99.9％的情况下，任何可以使用refs的东西都可以通过其他方式更好地解决。
在您的示例中，父级不应该通过refs：

访问子级数据

如果数据是关于子道具的，那么父母已经知道了数据，因此：不需要参考。
如果数据是关于子状态的，那么使用refs来访问该数据实际上是在作弊反应：状态不应该直接从组件外部访问。
如果数据不在子道具中，也不在子状态，则可能是设计遗漏需要修复，因为与应用相关的数据应该是道具或州。

在您的情况下，更好的ref - 解决方案将是：

通过添加textInputValue和textAreaValue
在父级中为textarea添加onChange()处理程序（因为此组件由父级直接呈现），这会更新状态
将this.state.textInputValue和changeHandler={this.textInputChangeHandler}作为道具传递给<TextInput>组件
在您的<TextInput>组件中，向输入组件添加onChange={this.props.changeHandler}，该组件调用父级上的方法以更新状态
在您父级的更改处理程序中，您可以阅读event.target.value以获取字段的新值。

通过执行此操作，您将输入值置于父级中的状态，并将其中一个作为道具传递给子级。

奖励：在提交表单的任何代码中，您无需再次阅读所有字段。您只需从this.state获取所有信息即可发送到任何地方。

流星 - 从孩子到父母获得价值

1 个答案: