Konnte Eingabe nicht rückgängig machen js

Question

Ich bin neu in React JS, ich handle ein Formular, um neue Dokumente zu erstellen, gibt es eine Option, die dem Benutzer ermöglicht, die Eingabe zu "löschen", habe ich durch andere Beiträge gegangen, aber sie habe mir nicht geholfen.

Ausgabe
Wenn ich versuche, mein Eingabeformular zu löschen, habe ich den Zustand auf einen leeren String, aber das ist nicht zu helfen. Irgendwelche Hilfe wird geschätzt danke

import React, { Component } from 'react'; 
import { Input, Button } from 'muicss/react'; 
import { Link } from 'react-router'; 

import { UserIsAuthenticated } from 'config.routes/UserIsAuthenticated'; 

import styles from './styles.scss'; 

class Dashboard extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     domain: '', 
    }; 

    this.inputChange = this.inputChange.bind(this); 
    this.clearInput = this.clearInput.bind(this); 
    } 

    inputChange(event) { 
    const name = event.target.name; 
    const value = event.target.value; 
    this.setState({ 
     [name]: value, 
    }); 
    } 

    clearInput(){ 
    this.setState({domain: ''}) 

    } 

    render() { 
    return (
     <div className={styles.dashboardContainer}> 
     <div className={styles.dashboardBody}> 
      <h1>Let's Get Started</h1> 
      <h5>Begin by entering a domain</h5> 
      <Input 
      className={styles.domainInput} 
      label="Domain Name" 
      type="text" 
      name="domain" 
      floatingLabel="true" 
      onChange={this.inputChange} 
      required 
      /> 
      <Button 
      variant="raised" 
      type="button" 
      onClick={this.onGo} 
      disabled={this.state.domain.length === 0} 
      > 
      <Link to="/reports" style={{ color: '#fff', textDecoration: 'none' }}> 
       Create Matrix {/* Todo: Replace the link */} 
      </Link> 
      </Button> 

      <h5 onClick={this.clearInput}><Link>Reset</Link> input</h5> 
     </div> 
     </div> 
    ); 
    } 
} 

export default UserIsAuthenticated(Dashboard); 

Answer 1

Ihre Eingabe ist derzeit unkontrolliert. Sie setzen die value Ihrer Eingabe nicht auf Ihren Status.

<Input 
    className={styles.domainInput} 
    label="Domain Name" 
    type="text" 
    name="domain" 
    floatingLabel="true" 
    onChange={this.inputChange} 
    value={this.state.domain} // <-- add this to your code 
    required 
    /> 

Answer 2

sollten Sie den Eingang an den Zustand binden.

Dieses Attribut mit dem Eingang:

value={this.state.domain}