2016-12-16 6 views
0

Ich habe eine Komponente namens SearchInput und es hat in ihmWarum kann ich nichts in mein React-Suchfeld eingeben?

<input 
    type='text' 
    className='input-field' 
    value={value} 
    placeholder={this.state.placeholder} 
    // onFocus={::this.onFocus} 
    // onBlur={::this.onBlur} 
    // onKeyUp={::this.onKeyUp} 
    // onKeyDown={::this.hanleArrowKeys} 
    // onChange={::this.onChange} 
    /> 

Allerdings, wenn ich etwas in es eingeben, geschieht nichts. Der Text erscheint nicht einmal. Was mache ich falsch?

Antwort

3

Wahrscheinlich wird Ihr Zustand nicht aktualisiert, haben Sie nicht "this" gebunden, um onChange zu funktionieren?

Hier ist ein Beispiel der korrekten Eingabe in reagieren:

class SearchInput extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { value: '' }; 
    this.handleInputChange = this.handleInputChange.bind(this); 
    } 

    handleInputChange(event) { 
    this.setState({ value: event.target.value }); 
    } 

    render() { 
    return <input type="text" value={this.state.value} onChange={this.handleInputChange}/>; 
    } 
} 
1

Wahrscheinlich mit einem Attribut in den Zustand der Komponente, die Sie den Wert des Eingabefeldes sind verbindlich und Sie sind entweder keine onChange prop zu erbringen Das Eingabe-Tag oder Ihre OnChange-Rückrufmethode aktualisiert das Attribut nicht in dem Status, an den der Wert des Eingabe-Tags gebunden ist.

Verwandte Themen