반응 입력을 지울 수 없습니다

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}