Question

我正在尝试制作一个ReactJS表单，其中有一个按钮，一旦按下该按钮，它将更改输入标签的值。每次按下按钮时，文本都会更改，但是页面会重新加载，并且文本区域会恢复为空白。我对此问题进行了一些搜索，发现了这个线程：Reactjs every time refreshing page on setState。但是，针对此问题的解决方案（shouldComponentUpdate（）{return false;}）最终使其得以解决，从而使inputarea的文本完全不变。这是我的代码：

import React, { Component } from 'react';

export default class Header extends Component {

    state = {
        cep : "",
        address : "",
    }

    searchCEP(){
        this.setState({ address : "Adress" });
    }

    render(){
        return (
            <div>
                <div id="host-form" className="row">
                    <div className="col s1"></div>
                    <form className="col s10">
                        <div className="row">
                            <div className="input-field col s6">
                                <input placeholder='"Terreno para churrasco"' id="title" type="text" className="validate"/>
                                <label htmlFor="title">Título</label>
                            </div>
                            <div className="input-field col s2">
                                <input id="cep" type="text" className="validate" defaultValue={this.state.cep}/>
                                <label htmlFor="cep">CEP</label>
                            </div>
                            <div id="buscar-cep" className="col s1">
                                <button onClick={() => this.searchCEP()} className="waves-effect blue waves-light btn">Buscar por CEP</button>
                            </div>
                            <div className="col s2"></div>
                        </div>
                        <div className="row">
                            <div className="input-field col s12">
                                <input placeholder='"Terreno de 500 metros quadrados com uma linda vista do Cristo Redentor...\"' id="description" type="text" className="validate"/>
                                <label htmlFor="description">Descrição</label>
                            </div>
                        </div>
                        <div className="row">
                            <div className="input-field col s12">
                                <input id="address" type="text" className="validate" defaultValue={this.state.address}/>
                                <label htmlFor="address">Endereço</label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我希望这足以理解我的问题。预先感谢您的帮助。

Answer 1

您可以进行以下更改

 <div id="buscar-cep" className="col s1">
                                <button onClick={(e) => this.searchCEP(e)} className="waves-effect blue waves-light btn">Buscar por CEP</button>
 </div>

并在 searchCEP 函数中进行以下更改：

searchCEP(e){
e.preventDefault();
        this.setState({ address : "Adress" });
    }

这将停止重新加载

Answer 2

从阅读您所说的关于重新加载页面的最佳情况来看，从过去的经验来看，当您调用该函数时，您不会阻止表单中按钮的默认操作，因此您可以尝试

    """
  searchCEP(e){
        e.preventDefault();
        this.setState({ address : "Adress" });
    }
"""

 <div id="buscar-cep" className="col s1">
  <button onClick={(e) => this.searchCEP(e)} className="waves-effect blue waves-light btn">Buscar por CEP</button>
  </div>

"""

自

希望这会有所帮助

Answer 3

您应该停止form元素的默认行为：

<form onSubmit={(e) => e.preventDefault()}

如何使ReactJS onClick函数更改文本区域的值？

3 个答案: