入力反応をクリアすることができません

Question

私はReact JSの初心者です。新しい文書を作成するためのフォームを扱っています。ユーザーが入力を「クリア」できるオプションがあります。私を助けてくれていない。

私は私の入力フォームをクリアしようとする課題は、私は空の文字列に状態を設定し、それは支援されていません。助けていただければ幸いです。

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

あなたの入力は現在制御されていません。入力のvalueをあなたの状態に設定していません。

<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

入力を状態にバインドする必要があります。

は、入力にこの属性を追加します。

value={this.state.domain}