Clear an input field with Reactjs?

后端 未结 7 2057
囚心锁ツ
囚心锁ツ 2020-12-08 04:33

I am using a variable below.

var newInput = {
   title: this.inputTitle.value,
   entry: this.inputEntry.value    
};

This is used by my i

7条回答
  •  隐瞒了意图╮
    2020-12-08 05:00

    The way I cleared my form input values was to add an id to my form tag. Then when I handleSubmit I call this.clearForm()

    In the clearForm function I then use document.getElementById("myForm").reset();

    import React, {Component } from 'react';
    import './App.css';
    import Button from './components/Button';
    import Input from './components/Input';
    
    class App extends Component {  
      state = {
        item: "", 
        list: []
    }
    
    componentDidMount() {
        this.clearForm();
      }
    
    handleFormSubmit = event => {
       this.clearForm()
       event.preventDefault()
       const item = this.state.item
    
        this.setState ({
            list: [...this.state.list, item],
                })
    
    }
    
    handleInputChange = event => {
      this.setState ({
        item: event.target.value 
      })
    }
    
    clearForm = () => {
      document.getElementById("myForm").reset(); 
      this.setState({
        item: ""
      })
    }
    
    
    
      render() {
        return (
          
    ); } } export default App;

提交回复
热议问题