Question

我是React的新手，对此有疑问。

我有一个表单，该表单应该执行http请求以保存表单。每次单击“提交”按钮，应用程序都应调用_resetForm（）方法并调用服务，但不会执行这些操作。我在评论'this.produtoService.salvar（this.state）'时收到此错误：'无法读取未定义的'_resetForm'属性'，并且在我评论'this._resetForm（）'时出现此错误：'无法读取属性'produtoService'未定义'。当我同时评论两者时，我不会出错。

const initialState = {
    nome: '',
    sku: '',
    descricao: '',
    preco: 0,
    fornecedor: ''
}

export default class CadastroProduto extends React.Component {

    constructor() {
        super();
        this.nameInput = React.createRef();
        this.produtoService = new ProdutoService();
    }

    state = initialState;

    onChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    _resetForm = () => {
        this.setState(initialState);
        this.nameInput.current.focus();
    }

    onSubmit(event) {
        event.preventDefault();
        this._resetForm();
        this.produtoService.salvar(this.state);
    }

    render() {
        return (
            <div className="card">
                <div className="card-header">Cadastro de Produtos</div>
                <div className="card-body">
                    <form onSubmit={this.onSubmit}>
                        <div className='row'>
                            <div className='col-md-6'>
                                <label>Nome:</label>
                                <input type='text' className='form-control' name='nome' ref={this.nameInput} value={this.state.nome} onChange={event => this.onChange(event)} autoFocus></input>
                            </div>
                            <div className='col-md-6'>
                                <label>SKU:</label>
                                <input type='text' className='form-control' name='sku' value={this.state.sku} onChange={event => this.onChange(event)}></input>
                            </div>
                        </div>
                        <div className='row'>
                            <div className='col-md-12'>
                                <label>Descrição:</label>
                                <textarea className='form-control' name='descricao' value={this.state.descricao} onChange={event => this.onChange(event)}></textarea>
                            </div>
                        </div>
                        <div className='row'>
                            <div className='col-md-6'>
                                <label>Preço:</label>
                                <input type='text' className='form-control' name='preco' value={this.state.preco} onChange={event => this.onChange(event)}></input>
                            </div>
                            <div className='col-md-6'>
                                <label>Fornecedor:</label>
                                <input type='text' className='form-control' name='fornecedor' value={this.state.fornecedor} onChange={event => this.onChange(event)}></input>
                            </div>
                        </div>
                        <div className='row'>
                            <div className='col-md-1'>
                                <button className='btn btn-primary' type='reset' onClick={this._resetForm}>Limpar</button>
                            </div>
                            <div className='col-md-1'>
                                <button className='btn btn-success' type='submit'>Salvar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
}

export default class ProdutoService {

    constructor() { }

    async salvar(produto) {
        AXIOS.defaults.headers.common = {}
        await AXIOS.post('http://localhost:3000/produtos', produto)
            .then(response => response)
            .catch(error => console.log(error))
            .finally()
    }
}

如果您能帮助我，我会很高兴

Answer 1

将您的onSubmit事件更改为以下内容。

 onSubmit= (event) => {
        event.preventDefault();
        this._resetForm();
        this.produtoService.salvar(this.state);
  }

另一种方法是将this绑定到构造函数中。

   constructor() {
        // ... Your code here
        this.onSubmit = this.onSubmit.bind(this);
    }

当前设置不起作用的原因是，所使用的this关键字仅适用于onSubmit函数。

使用箭头函数或将this关键字绑定到onSubmit将允许该函数使用该类的this。

无法读取未定义的属性“ _resetForm”

1 个答案: