React-Eingabe DefaultValue wird nicht mit Status aktualisiert

defaultValue ist nur für das erste laden

Wenn Sie möchten, initialisieren Sie den Eingang, dann sollten Sie verwenden, defaultValue, aber wenn Sie verwenden möchten Staates, um den Wert zu ändern, dann müssen Sie verwenden Wert. Ich persönlich mag nur verwenden, defaultValue, wenn ich nur initialisieren und dann nur mit refs, um den Wert, wenn ich senden. Es gibt mehr info auf refs und Eingänge auf das reagieren, docs, https://facebook.github.io/react/docs/forms.html und https://facebook.github.io/react/docs/working-with-the-browser.html.

Hier ist, wie würde ich umschreiben Ihre Eingabe:

awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else ''
<input ref="text" onChange={this.onTextChange} placeholder="Placeholder Text" value={@state.awayMessageText} />

Auch Sie nicht wollen, um pass Platzhalter-text wie hast du denn das eigentlich setzen Sie den Wert auf "Platzhalter-text". Sie immer noch müssen, übergeben Sie einen leeren Wert in das Eingabefeld, da undefined und null stellt den Wert in Standardwert-im wesentlichen. https://facebook.github.io/react/tips/controlled-input-null-value.html.

getInitialState kann nicht in api-Aufrufe

Müssen Sie die api-Aufrufe nach getInitialState ausgeführt wird. Für deinen Fall würde ich es tun, in componentDidMount. Folgen Sie diesem Beispiel, https://facebook.github.io/react/tips/initial-ajax.html.

Ich würde auch empfehlen zu Lesen, bis auf die Komponente Lebenszyklus reagieren. https://facebook.github.io/react/docs/component-specs.html.

Umschreiben mit änderungen und laden von Staat

Persönlich mag ich nicht die ganze if -, else-dann-Logik in der render-und benutze lieber 'be' in meinem Zustand und machen einen font awesome spinner, bevor das Formular geladen wird, http://fortawesome.github.io/Font-Awesome/examples/. Hier ist ein umschreiben, um dir zu zeigen was ich meine. Wenn ich es vermasselte die Zecken für cjsx, es ist, weil ich normalerweise nur verwenden, coffeescript, wie diese, .

window.Pages ||= {}

Pages.AwayMessages = React.createClass

  getInitialState: ->
    { loading: true, awayMessage: {} }

  componentDidMount: ->
    App.API.fetchAwayMessage (data) =>
      @setState awayMessage:data.away_message, loading: false

  onToggleCheckbox: (event)->
    @state.awayMessage.master_toggle = event.target.checked
    @setState(awayMessage: @state.awayMessage)

  onTextChange: (event) ->
    @state.awayMessage.text = event.target.value
    @setState(awayMessage: @state.awayMessage)

  onSubmit: (e) ->
    # Not sure what this is for. I'd be careful using globals like this
    window.a = @
    @submitAwayMessage(@state.awayMessage)

  submitAwayMessage: (awayMessage)->
    console.log "I'm saving", awayMessage
    App.API.saveAwayMessage awayMessage, (data) =>
      if data.status == 'ok'
        App.modal.closeModal()
        notificationActions.notify("Away Message saved.")
        @setState awayMessage:awayMessage

  render: ->
    if this.state.loading
      `<i className="fa fa-spinner fa-spin"></i>`
    else
    `<div className="away-messages">
       <div className="header">
         <h4>Away Messages</h4>
       </div>
       <div className="content">
         <div className="input-group">
           <label for="master_toggle">On?</label>
           <input type="checkbox" onChange={this.onToggleCheckbox} checked={this.state.awayMessage.master_toggle} />
         </div>
         <div className="input-group">
           <label for="text">Text</label>
           <input ref="text" onChange={this.onTextChange} value={this.state.awayMessage.text} />
         </div>
       </div>
       <div className="footer">
         <button className="button2" onClick={this.close}>Close</button>
         <button className="button1" onClick={this.onSubmit}>Save</button>
       </div>
     </div>

Sollte etwa deckt es. Nun, das ist ein Weg zu gehen, über die Formen, die verwendet Zustand und Wert. Sie können auch einfach verwenden defaultValue anstelle von Wert und verwenden Sie dann refs zu Holen Sie sich die Werte, wenn Sie Sie Einreichen. Wenn Sie diesen Weg gehen, würde ich empfehlen, Sie haben eine äußere Schale Komponente (in der Regel bezeichnet als high-Bestellung von Komponenten), um die Daten abzurufen, und dann geben Sie auf dem Formular als Requisiten.

Insgesamt würde ich empfehlen, das Lesen die reagieren docs alle den Weg durch und machen Sie einige tutorials. Es gibt viele blogs da draußen und http://www.egghead.io hatte einige gute tutorials. Ich habe einige Sachen auf meiner Website als gut, http://www.openmindedinnovations.com.

InformationsquelleAutor der Antwort Blaine Hatab

Vielleicht nicht die beste Lösung, aber ich würde dafür eine Komponente wie unten, so kann ich es wiederverwenden, überall in meinem code. Ich wünschte, es war bereits zu reagieren, indem default.

<MagicInput type="text" binding={[this, 'awayMessage.text']} />

Die Komponente kann wie folgt Aussehen:

window.MagicInput = React.createClass

  onChange: (e) ->
    state = @props.binding[0].state
    changeByArray state, @path(), e.target.value
    @props.binding[0].setState state

  path: ->
    @props.binding[1].split('.')
  getValue: ->
    value = @props.binding[0].state
    path = @path()
    i = 0
    while i < path.length
      value = value[path[i]]
      i++
    value

  render: ->
    type = if @props.type then @props.type else 'input'
    parent_state = @props.binding[0]
    `<input
      type={type}
      onChange={this.onChange}
      value={this.getValue()}
    />`

Wo die Veränderung durch ein array ist eine Funktion, die den Zugriff auf hash durch einen Pfad, ausgedrückt durch eine Reihe

changeByArray = (hash, array, newValue, idx) ->
  idx = if _.isUndefined(idx) then 0 else idx
  if idx == array.length - 1
    hash[array[idx]] = newValue
  else
    changeByArray hash[array[idx]], array, newValue, ++idx 

InformationsquelleAutor der Antwort Mïchael Makaröv

obwohl nicht empfohlen von reagieren, es funktioniert:

render() {
    const { value } = this.state;
    return <input
        defaultValue={value}
        value={value} />;
}

InformationsquelleAutor der Antwort