Hier ist eine React-Klasse, an der ich arbeite:
import React from 'react';
export default class ExpenseForm extends React.Component {
state = {
title: ''
};
onTitleChange = (e) => {
const title = e.target.value;
this.setState(() => ({title}));
};
render() {
return (
<div>
<form>
<input
type='text'
placeholder='title'
value={this.state.title}
onChange={(e) => this.setState(() => ({title: e.target.value}))}
required autoFocus/>
<textarea placeholder='Add a note for your expense'/>
<input type='number' placeholder='amount' required/>
<input type='submit' value='Add Expense'/>
</form>
</div>
);
}
}
Dies löst Uncaught TypeError: Cannot read property 'value' of nullbeim Ausführen einen Fehler aus onChange.
Aber wenn ich innere js von onChangein eine separate Funktion umstrukturiere onTitleChangeund diese Funktion aufrufe:, funktioniert onChange={this.onTitleChange}es perfekt. Was könnte der Grund für dieses Verhalten sein?
Hier haben Sie ein Änderungsereignis zugewiesen, da dies onChange={(e) => this.setState(() => ({title: e.target.value}))}hier e.target.valuenicht funktioniert, da es innerhalb des setState()Bereichs liegt.
Wenn Sie Ihre Funktion erweitern, werden wir bekommen
function(e){
this.setState(function(){
return {
title: e.target.value
}
})
}
Hier gibt es keine eFunktion im Inneren setSate(), daher e.target.valuewird es einen Fehler geben.
Da Sie nicht mit dem vorherigen Wert vergleichen möchten und nur den Wert auf title setzen müssen, können Sie like verwenden
onChange={(e) => this.setState({title: e.target.value})}
Es ist keine zusätzliche Funktion im Inneren erforderlich setState
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen