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)
とか、ぐらい?
React/ReactDOM のドキュメントでは、ref
.
ありがとうございました!