1

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.

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

4

1 に答える 1

3

コンポーネントの状態を使用して入力の値が設定されるControlled コンポーネントを作成できます。

<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次に、メソッド内で content 値をリセットするだけです。

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

注: addNote を正しくバインドして、this.setState が正しく参照されるようにしてください。

于 2016-11-24T22:32:14.977 に答える