Question

我目前正在尝试使用表示和容器组件重构meteor的简单todos教程，但在尝试访问功能无状态组件中的tcc的ref时遇到了问题。我发现要访问input，您必须将组件包装在有状态组件中，我使用refs。

input

这个输入应该是有状态的，因为它使用类语法，至少我认为。

// import React ...
import Input from './Input.jsx';

const AppWrapper = (props) => { 
  // ... more lines of code 

  <form className="new-task" onSubmit={props.handleSubmit}>
    <Input />
  </form>
}

import React, { Component } from 'react';

我使用引号来搜索包含export default class Input extends Component { render() { return ( <input type="text" ref="textInput" placeholder="Type here to add more todos" /> ) } }中的输入值。

AppContainer

console.log的结果是import AppWrapper from '../ui/AppWrapper.js'; handleSubmit = (event) => { event.preventDefault(); // find the text field via the React ref console.log(ReactDOM.findDOMNode(this.refs.textInput)); const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim(); ... }，那么我的输入组件是不是有状态的？我是否需要设置一个构造函数来设置null的值以使该组件有状态，或者我是否应该在需要使用this.state时放弃使用功能无状态组件？

Answer 1

或者我应该在需要使用refs时放弃使用功能无状态组件？

是。如果组件需要保持对它们呈现的元素的引用，则它们是有状态的。

可以使用“回调”功能设置参考：

export default class Input extends Component {

  render() {
    // the ref is now accessable as this.textInput
    alert(this.textInput.value) 
    return ( 
      <input 
        type="text"
        ref={node => this.textInput = node}
        placeholder="Type here to add more todos" 
      />
    )
  }
}

Answer 2

使用refs时必须使用有状态组件。在您的handleSubmit事件中，您正在调用＆＃39; this.refs＆＃39;当该字段位于单独的组件中时。

要使用引用，请在您呈现AppWrapper的位置添加引用，并且AppWrapper本身必须是有状态的。

以下是一个例子：

AppWrapper - 这是您的表单

class AppWrapper extends React.Component {
  render() {
    return (
      <form 
        ref={f => this._form = f} 
        onSubmit={this.props.handleSubmit}>
        <Input 
          name="textInput" 
          placeholder="Type here to add more todos" />
      </form>
    );
  }
};

输入 - 这是一个可重复使用的文本框组件

const Input = (props) => (
  <input 
    type="text"
    name={props.name}
    className="textbox"
    placeholder={props.placeholder}
  />
);

应用 - 这是容器组件

class App extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const text = this._wrapperComponent._form.textInput.value;
    console.log(text);
  }

  render() {
    return (
      <AppWrapper 
        handleSubmit={this.handleSubmit} 
        ref={r => this._wrapperComponent = r}
        />
    );
  }
}

http://codepen.io/jzmmm/pen/BzAqbk?editors=0011

如您所见，Input组件是无状态的，AppWrapper是有状态的。您现在可以避免使用ReactDOM.findDOMNode，并直接访问textInput。输入必须具有name属性才能被引用。

您可以通过将<form>标记移动到App组件中来简化此操作。这将消除一个ref。

在有状态组件中访问refs在React中不起作用？

2 个答案: