Klartexteingabe nach Klickereignis

Question

Das Problem, das ich habe, ist nach der Eingabe von Text zum ersten Mal, ich klicke dann auf Hinzufügen und das Eingabefeld wird gelöscht. Wenn ich jedoch wieder Text eingeben möchte, kann der eingegebene Text keinen anderen Text als den ersten eingeben. Ich bin mir nicht sicher, warum es das tut.

Answer 1

Ich bin überrascht, dass dies sogar das erste Mal funktioniert. Mit controlled components reagieren (diejenigen, bei denen Sie den Wert wie bei Ihrer Eingabe einstellen). Sie müssen den Wert aktualisieren, wenn der Benutzer den Text ändert (mit dem Ereignis onChange()).

Ich machte eine JS fiddle here with your original code und Sie können sehen, Sie können nicht einmal den Wert in der Eingabe aktualisieren. Um es zu aktualisieren, müssen Sie das onBlur-Ereignis durch ein onChange event like this JS fiddle ersetzen. Ich hoffe, das hilft!

Answer 2

Wie hier erwähnt (https://facebook.github.io/react/docs/forms.html#controlled-components)

A prop hat einen Wert gesteuert. Das Rendern eines kontrollierten Wertes spiegelt den Wert des Props wider.

Die Benutzereingabe hat keine Auswirkungen auf das gerenderte Element, da React den Wert als Hello deklariert hat. Um den Wert in Reaktion auf Benutzereingaben zu aktualisieren, können Sie die onChange Ereignis verwenden

Sie müssen entweder onBlur zu onChange ändern, oder verwenden Sie defaultValue statt value. z.B.

<input defaultValue={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} /> 

Answer 3

Sie müssen so schnell den Wert der Zustandsvariablen ändern, wie Sie den Eingabewert eingeben, weil das ist, was Sie die Eingabe bereitstellen, wenn Sie es nicht ändern Sie dann die Eingabe wird nicht den aktualisierten Wert anzeigen . Um dies zu tun, müssen Sie das Ereignis onChange überall verwenden.

var FormTextBox = React.createClass({ 
 
    handleOnChange: function (e) { 
 
     this.props.onChange(e.target.value); 
 
    }, 
 
    render: function() { 
 
     return (
 
      <input value={this.props.value} key={this.props.fid} type="text" onChange={this.handleOnChange} /> 
 
     ) 
 
    } 
 
}); 
 

 
var TestFormTextBox = React.createClass({ 
 
    getInitialState: function (e) { 
 
     return { 
 
      value: '' 
 
     } 
 
    }, 
 
    handleOnAdd: function (e) { 
 
     this.setState({ value: '' }); 
 
    }, 
 
    handleTextInfo: function (value) { 
 
     this.setState({ value: value }); 
 
    }, 
 
    render: function() { 
 
     return (
 
       <div> 
 
        <table> 
 
         <tbody> 
 
          <tr> 
 
           <td>Details</td> 
 
           <td></td> 
 
          </tr> 
 
          <tr> 
 
           <td><FormTextBox value={this.state.value} fid={1} onChange={this.handleTextInfo} /></td> 
 
           <td><button onClick={this.handleOnAdd}>Add</button></td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
     ) 
 
    } 
 
}); 
 

 
ReactDOM.render(<TestFormTextBox />, document.getElementById('app'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script> 
 
<div id="app"></div>