Question

我是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);

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}

无法清除输入反应js

2 个答案: