Как очистить контролируемые формы в реакт-редуксе

Question

Я пытаюсь очистить форму в моем компоненте Reaction-Redux. Я знаю, что должен быть в состоянии очистить их с помощью setState () после отправки, но, поскольку я получаю все свои данные в качестве реквизита (через хранилище лексемов), существует ли простой способ сделать это внутри самого компонента?

class Postform extends Component {
    constructor(props){
        super(props)
        this.state={
            propertyName: ' enter name ',
            footage: ' size in sqft ',
            address: ' full address ',
            price: ' $ 00.00 '
        }   
    }

    onChange =(e)=>{
        this.setState({ [e.target.name] :e.target.value});
    }

    onSubmit = (e) =>{
        e.preventDefault()
        const newListing = {
            propertyName: this.state.propertyName,
            footage: this.state.footage,
            address: this.state.address,
            price: this.state.price
        }

        this.props.newProperty(newListing)
// my attempt to reset the state of the form (unsure how to accomplish this?)
        this.setState({
            propertyName: '',
            footage: '',
            address: '',
            price: ''
        })
    };


    render() {
        return (
            <div className="form">
                <h2>Add Listing</h2>
                <form onSubmit = {this.onSubmit}>
                    <div>
                        <label>your listing name</label><br/>
                        <input name="propertyName" type="text" onChange={this.onChange} placeholder={this.state.propertyName} />
                    </div>

                    <div>
                        <label>listing size </label><br/>
                        <input name="footage" onChange={this.onChange} placeholder={this.state.footage} />
                    </div>

                    <div>
                        <label>listing location </label><br/>
                        <input name="address" onChange={this.onChange} placeholder={this.state.address} />
                    </div>

                    <div>
                        <label>desired price </label><br/>
                        <input name="price" onChange={this.onChange} placeholder={this.state.price} />
                    </div>

                    <br/>
                        <button className="submitbtn" type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

Postform.propTypes = {
    newProperty: PropTypes.func.isRequired,
    new: PropTypes.object
}

const mapStateToProps = state =>({
    listings: state.listings.properties,
    new: state.listings.newListing
});

export default connect(mapStateToProps, {newProperty})(Postform)

Я проверил онлайн и нашел несколько решений. Я хотел посмотреть, сможет ли кто-нибудь сказать мне, основываясь на моем коде, есть ли предпочтительный способ достижения этого?

Здесь все разные методы, которые я нашел, не уверены, какой мне следует использовать, основываясь на моем компоненте: https://redux-form.com/6.0.0-alpha.7/docs/faq/howtoclear.md/

Answer 1

import { initialize, reset } from 'redux-form';    
dispatch(initialize('formName', {})); // Clear form

// or 

dispatch(reset('formName'));

Answer 2

Ваш подход мне подходит, я бы только немного ленивым сделал:

this.setState(Object.keys(this.state).forEach(key => this.state[key] = ''))