重置 ReactDOM Ref 子项中的值（最佳实践？）

Question

我有一个无状态组件，称为 FlexibleInput。

import React, { PropTypes } from 'react'

export default function FlexibleInput({
  id,
  label,
  defaultValue,
  type,
  onChange,
}){
  let fieldClass = `${id}-field`
  return (
    <fieldset className={fieldClass}>
      <label htmlFor={id}>{label}</label>
      <input
        key={id}
        id={id}
        type={type}
        defaultValue={defaultValue}
        onChange={onChange}
        />
    </fieldset>
  )
}

FlexibleInput.propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  defaultValue: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired, // accepts "text", "password" atm.
  onChange: PropTypes.func.isRequired,
}

我在名为 AddNote 的表单中使用此 FlexibleInput。

<form
  className="note-list__add-note"
  onSubmit={this.addNote}
  ref={`${this.props.type}-addNoteForm`}
  >
  <FlexibleInput
    id="note"
    label="Awaiting changes..."
    type="text"
    defaultValue=""
    onChange={(e) => this.setState({ content: e.target.value })}
    />

使用 this.addNote 函数提交后...我希望能够重置 FlexibleInput 输入值。

我成功地做了一个丑陋的 ass hack 版本...

this.refs[`${this.props.type}-addNoteForm`]
  .childNodes[0].childNodes[1].value = ''

设法正确重置值。这很容易改变，因为 FlexibleInput 的结构可能会改变？我不知道，希望不是。

但我的主要问题是，有没有办法让我做一些

this.refs[bla bla].find(#input)

左右？

在 React/ReactDOM 文档中不是很清楚 api 可用于 ref。

谢谢！

Answer 1

您可以创建一个 Controlled component，从而使用组件状态设置输入值：

<form
  className="note-list__add-note"
  onSubmit={this.addNote}
  ref={`${this.props.type}-addNoteForm`}
  >
  <FlexibleInput
    id="note"
    label="Awaiting changes..."
    type="text"
    defaultValue=""
    value={this.state.content}
    onChange={(e) => this.setState({ content: e.target.value })}
  />

那么您只需要在 this.addNote 方法中重置内容值：

addNote() {
  this.setState({ content: '' });
}

N.B。确保正确绑定 addNote 以确保 this.setState 被正确引用。

重置 ReactDOM Ref 子项中的值（最佳实践？）

Resetting Values in ReactDOM Ref children (Best Practices?)

reactjs

stateless

react-dom