0

input我目前正在尝试使用演示和容器组件重构流星的 simple-todos 教程，但在尝试访问功能性无状态组件中的 refs 时遇到了问题。我发现要访问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"
      />
    )   
  }
}

我使用 refs 在包含的内容中搜索输入的值AppContainer。

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();
  ...
}

console.log 的结果是null，所以我的 Input 组件不是有状态的吗？我是否需要设置一个构造函数来设置一个值this.state来使这个组件有状态，或者我应该在需要使用时放弃使用功能性无状态组件refs？

4

2 回答 2

0

还是应该在需要使用 refs 时放弃使用功能性无状态组件？

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

可以使用“回调”函数设置 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" 
      />
    )
  }
}
于 2016-07-22T01:40:17.980 回答
0

使用 refs 时必须使用有状态组件。在您的 handleSubmit 事件中，当字段位于单独的组件中时，您将调用“this.refs”。

要使用 refs，您需要在渲染 AppWrapper 的地方添加一个 ref，并且 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>
    );
  }
};

Input - 这是一个可重用的文本框组件

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

App - 这是容器组件

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。

于 2016-07-22T02:11:32.123 回答