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, 
} 

私はこのFlexibleInputをAddNoteというフォームで使用します。

<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入力値をリセットできるようにしたいと思います。私は醜いお尻のハックバージョンを行うことができた

...適切に値をリセットするために管理し

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

。 FlexibleInputの構造が変更される可能性があるため、これは変更される傾向がありますか？私は知らない、うまくいけない。

しかし、私の主な質問は、私は

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

かそこらの並べ替えを行うことができます方法はありますか？

refのAPIはReact/ReactDOMのドキュメントではあまり明確ではありません。

ありがとうございました！

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: '' }); 
} 

NB addNoteを正しくバインドして、this.setStateが正しく参照されていることを確認してください。