我是React JS的新手,我正在处理一个表单来创建新文档,有一个选项允许用户“清除”输入,我已经通过其他帖子,但他们没有帮助我。 / p>
问题
当我尝试清除输入表单时,我将状态设置为空字符串,但这没有帮助。任何帮助将不胜感激
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);
答案 0 :(得分:3)
您的输入目前无法控制。您没有将输入的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
/>
答案 1 :(得分:2)
你应该将输入绑定到状态。
将此属性添加到输入:
value={this.state.domain}