Ich habe diese Komponente:
import React from 'react';
export default class AddItem extends React.Component {
add() {
this.props.onButtonClick(this.input.value);
this.input.value = '';
}
render() {
return (
<div className="add-item">
<input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
<button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
</div>
);
}
}
Ich möchte, dass die Schaltfläche deaktiviert wird, wenn der Eingabewert leer ist. Der obige Code funktioniert jedoch nicht. Es sagt:
add-item.component.js: 78 Nicht erfasster TypeError: Die Eigenschaft 'value' von undefined kann nicht gelesen werden
zeigen auf disabled={!this.input.value}
. Was kann ich hier falsch machen? Ich vermute, dass ref möglicherweise noch nicht erstellt wurde, wenn die render
Methode ausgeführt wird. Wenn ja, wie lautet die Problemumgehung?
quelle
disabled
Attribut aus dem DOM, wenn es auf gesetzt istfalse
- dies ist browserübergreifend.In HTML
Alle von ihnen laufen auf disabled = "true" hinaus, da für eine nicht leere Zeichenfolge true zurückgegeben wird. Um false zurückzugeben, übergeben Sie daher eine leere Zeichenfolge in einer bedingten Anweisung wie this.input.value? "True": "" .
render() { return ( <div className="add-item"> <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} /> <button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button> </div> ); }
quelle
Sie sollten den Wert der Eingabe nicht über refs einstellen.
Sehen Sie sich hier die Dokumentation zu kontrollierten Formularkomponenten an - https://facebook.github.io/react/docs/forms.html#controlled-components
In einer Nussschale
<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
Dann können Sie den deaktivierten Status mithilfe von steuern
disabled={!this.state.value}
quelle
Es gibt nur wenige typische Methoden, wie wir das Rendern von Komponenten in React steuern.
Aber ich habe hier keine davon verwendet, sondern nur die Refs verwendet, um der Komponente zugrunde liegende untergeordnete Elemente zu benennen.
class AddItem extends React.Component { change(e) { if ("" != e.target.value) { this.button.disabled = false; } else { this.button.disabled = true; } } add(e) { console.log(this.input.value); this.input.value = ''; this.button.disabled = true; } render() { return ( <div className="add-item"> <input type="text" className = "add-item__input" ref = {(input) => this.input=input} onChange = {this.change.bind(this)} /> <button className="add-item__button" onClick= {this.add.bind(this)} ref={(button) => this.button=button}>Add </button> </div> ); } } ReactDOM.render(<AddItem / > , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
quelle
this.input
ist undefiniert, bis derref
Rückruf aufgerufen wird. Versuchen Sie,this.input
in Ihrem Konstruktor einen Anfangswert festzulegen.Aus den React-Dokumenten zu Refs , Hervorhebung von mir:
quelle
Ich hatte ein ähnliches Problem. Es stellte sich heraus, dass wir dafür keine Hooks benötigen. Wir können ein bedingtes Rendern erstellen und es wird immer noch gut funktionieren.
<Button type="submit" disabled={ name === "" || email === "" || password === "" ? true : false } fullWidth variant="contained" color="primary" className={classes.submit}> SignUP </Button>
quelle
einfach hinzufügen:
<button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
quelle
Eine sehr einfache Lösung hierfür ist die Verwendung eines
useRef
Hakensconst buttonRef = useRef(); const disableButton = () =>{ buttonRef.current.disabled = true; // this disables the button } <button className="btn btn-primary mt-2" ref={buttonRef} onClick={disableButton} > Add </button>
Ebenso können Sie die Schaltfläche mit aktivieren
buttonRef.current.disabled = false
quelle