Fehler beim Ändern des Wertstatus des Eingabefelds

Question

Mein Eingabefeld kann nicht bearbeitet werden, wenn ich versuche, den Wert darin zu bearbeiten.

Ich bin nicht sicher, ob mein onChange-Ereignis ordnungsgemäß verwendet wird, um den Wert der Eingabe zu ändern.

import React from "react"; 

import * as TodoActions from "../actions/TodoActions"; 
import TodoStore from "../stores/TodoStore"; 

export default class Todo extends React.Component { 
    constructor(props) { 
    super(); 
    } 

    deleteTodo() { 
    TodoActions.deleteTodo(this.props.id); 
    } 

    toggleEdit() { 
    TodoActions.toggleEdit(this.props.id); 
    } 

    updateTodo() { 
    TodoActions.updateTodo(this.props.text); 
    } 

    toggleComplete() { 
    TodoActions.toggleComplete(this.props.id); 
    } 

    onChange(e) { 
    console.log('e.taget.value: '+ e.target.value); 
    this.setState({ 
     value: e.target.value 
    }); 
    console.log(value); 

    } 

    render() { 
    const buttonStyle = { margin: "5px" }; 

    const { complete, edit, text, id } = this.props; 

    const icon = complete ? "\u2714" : "\u2716" 

    if (edit) { 
     return (
     <li> 
      <form onSubmit={this.updateTodo.bind(this)}> 
      <input onChange={this.onChange.bind(this)} value={text} focus="focused"/> 
      <button onClick={this.toggleEdit.bind(this)} class="btn btn-default btn-sm" style={buttonStyle}>Cancel</button> 
      <button onClick={this.updateTodo.bind(this)} class="btn btn-success btn-sm" style={buttonStyle}>Update</button> 
      </form> 
     </li> 
    ); 
    } 

    return (
     <li> 
     <span>{text}</span> 
     <span onClick={this.toggleComplete.bind(this)} class="btn btn-default btn-xs" style={buttonStyle}>{icon}</span> 
     <button onClick={this.toggleEdit.bind(this)} class="btn btn-primary btn-sm" style={buttonStyle}>Edit</button> 
     <button onClick={this.deleteTodo.bind(this)} class="btn btn-danger btn-sm" style={buttonStyle}>Delete</button> 
     </li> 
    ); 
    } 
} 

Answer 1

Ihre <input/> sollte eine gesteuerte Komponente sein, wie Ihre value prop verwenden.

Versuchen Sie, diese

<input onChange={this.onChange.bind(this)} value={this.state.value || text} focus="focused"/> 

Und fügen Sie einen leeren Zustand zu Ihrem constructor

constructor(props) { 
    super(); 
    this.state = {} 
} 

Answer 2

Wenn Ihr text Eigenschaft nicht gesetzt ist, dann wird es als null an den Eingang geleitet, die äquivalent ist es überhaupt nicht passiert. In diesem Fall wird die Eingabe als unkontrolliert gerendert und Sie können den Wert nicht über Requisiten ändern.

In diesem Fall ist der beste Ansatz ist, Standardwert für Ihre Immobilie zu setzen, um sicherzustellen, dass es zumindest eine leere Zeichenfolge ist:

Todo.defaultProps = { 
    text: '' 
}; 

dies am Ende hinzufügen, und Sie sollten sicher sein, dass die Eingang ist immer gesteuert.