reactjs - 如何在 React 中回调类的状态值？

Question

我正在为一家在线商店制作目录。在我的handleSave函数结束时，有没有办法调用Admin类状态中的值来重置用户的输入字段？我的最终目标是为用户重置页面上的输入。我不确定我是否做错了，我正在学习。谢谢!这是我的代码。

class Admin extends Component {
    state = {
        id: "",
        price: 0,
        stock: 0,
        title: "",
        description: "",
        image: "",
        discount: 0,
        category: ""
      }
    render() { 
        return (
            <div className="adminPage">

                <label>id</label>
                <input type="text" name="id" value={this.state.id} onChange={this.handleInputChange}/>
                <br/>

                <label>Price</label>
                <input type="number" name="price" value={this.state.price} onChange={this.handleInputChange}/>
                <br/>

                <label>Stock</label>
                <input type="number" name="stock" value={this.state.stock} onChange={this.handleInputChange}/>
                <br/>

                <label>Title</label>
                <input type="text" name="title" value={this.state.title} onChange={this.handleInputChange}/>
                <br/>

                <label>Description</label>
                <input type="text" name="description" value={this.state.description} onChange={this.handleInputChange}/>
                <br/>

                <label>Image URL</label>
                <input type="text" name="image" value={this.state.image} onChange={this.handleInputChange}/>
                <br/>

                <label>Discount</label>
                <input type="number" name="discount" value={this.state.discount} onChange={this.handleInputChange}/>
                <br/>

                <label>Category</label>
                <input type="text" name="category" value={this.state.category} onChange={this.handleInputChange}/>
                <br/>

                <button className="btn btn-dark" onClick={this.handleSave}>Save Product</button>
            </div>
          );
    }

    handleInputChange = (event) => { //45 minutes left in class, rewatch this lecture tomorrow
        this.setState({ [event.target.name]: event.target.value });
    };

    handleSave = () => {
        this.setState({ title: "Changed from code..."});}

Answer 1

创建一个defaultState变量并将其分配给state，一旦保存，它将重置所有输入值。

class Admin extends Component {
         defaultState={
            id: "",
            price: 0,
            stock: 0,
            title: "",
            description: "",
            image: "",
            discount: 0,
            category: ""
          }
        state = {...defaultState}
        render() { 
            return (
                <div className="adminPage">
    
                    <label>id</label>
                    <input type="text" name="id" value={this.state.id} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Price</label>
                    <input type="number" name="price" value={this.state.price} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Stock</label>
                    <input type="number" name="stock" value={this.state.stock} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Title</label>
                    <input type="text" name="title" value={this.state.title} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Description</label>
                    <input type="text" name="description" value={this.state.description} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Image URL</label>
                    <input type="text" name="image" value={this.state.image} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Discount</label>
                    <input type="number" name="discount" value={this.state.discount} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Category</label>
                    <input type="text" name="category" value={this.state.category} onChange={this.handleInputChange}/>
                    <br/>
    
                    <button className="btn btn-dark" onClick={this.handleSave}>Save Product</button>
                </div>
              );
        }
    
        handleInputChange = (event) => { //45 minutes left in class, rewatch this lecture tomorrow
            this.setState({ [event.target.name]: event.target.value });
        };
    
        handleSave = () => {
            this.setState({...defaultState});
}