Question

我在文本框中输入了一些数据，然后单击了按钮。单击按钮后，数据应重置。

tesseract words.png out -l eng PDF

单击按钮后，数据应重置...

Answer 1

您需要为value提供input道具，

<input type="text"
  placeholder="Search Value..." 
  onChange ={this.inputData} 
  value = {this.state.keywords}
/>

进一步了解Controlled Component。

Demo

Answer 2

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "React App",
      keywords: "Type Above"
    };
  }

  inputData = event => {
    console.log(event.target.value);
    this.setState({
      keywords: event.target.value ? event.target.value : "Type Above"
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    alert("Button Clicked");
    this.setState({ keywords: "" });
  };

  render() {
    return (
      <div>
        <h2>{this.state.title}</h2>
        <form onSubmit={this.handleSubmit}>
          <center>
            <input
              type="text"
              placeholder="Search Value..."
              value={this.state.keywords === 'Type Above' ? '' : this.state.keywords}
              onChange={this.inputData}
            />
            <h3>{this.state.keywords}</h3>
          </center>
          <button> BUtton </button>
        </form>
      </div>
    );
  }
}

Answer 3

您的问题是您没有为输入分配keywords值，因为单击按钮后该值已正确删除，您可以在此处看到它：

class Header extends Component {
  state = {
    title : 'React App',
    keywords : 'Type Above'
  };

  inputData = event => {
   console.log(event.target.value)
   this.setState({ keywords: event.target.value ? event.target.value : 'Type Above' });        
  };

  handleSubmit = event => {
    event.preventDefault();
    alert('Button Clicked');
    this.setState({ keywords: "" });
  };

  render() {
    const { keywords, title } = this.state;

    return (
      <div>
        <h2>{title}</h2>
        <form onSubmit={this.handleSubmit}> 
          <center>
            <input
              type="text"
              placeholder="Search Value..." 
              onChange={this.inputData}
              value={keywords}
            />
            <h3>{keywords}</h3>
          </center>
          <button>Button </button>
        </form>
      </div>
    )
  }
}

希望这会有所帮助，

Answer 4

您缺少value的{{1}}属性。您需要添加类似input

的内容

单击按钮后，无法重置数据

4 个答案: