流星 - 从孩子到父母的价值

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 属性是放在TextInput 中的ref 属性中的：

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

在SubmitStoryForm.jsx，但是

this.refs.bodyInput.value

工作正常。

错误：

Uncaught TypeError: Cannot read property 'value' of null

Answer 1

虽然您可以使用refs 让父级访问子组件的数据，但您确实不应该这样做。 （Netflix，react 的重度用户，甚至有一个规则“no refs, ever”参见this video，从大约 10m 开始）。 在 99.9% 的情况下，您可以使用 refs 处理的任何事情都可以通过其他方式更好地解决。
在您的示例中，父母不需要通过 refs 访问孩子的数据：

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

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

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

通过这样做，您将输入值放入父级中的状态，并将其中一个作为道具传递给子级。

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