Как заставить функцию ReactJS onClick изменять значение текстовой области?

Question

Я пытаюсь создать форму ReactJS, в которой есть кнопка, которая после нажатия изменяет значение тега ввода.Каждый раз, когда я нажимаю кнопку, текст изменяется, но страница перезагружается, и текстовое поле возвращается к пустому.Я немного искал эту проблему и нашел эту тему: Reactjs каждый раз обновляя страницу на 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

после прочтения того, что вы сказали, лучшая причина того, почему страница перезагружается, из прошлого опыта состоит в том, что при вызове функции вы не препятствуете действию кнопки по умолчанию в форме, чтобы вы могли попробовать

    """
  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 2

Вы должны остановить поведение по умолчанию для элемента form:

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

Answer 3

Вы можете внести следующие изменения

 <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" });
    }

Это остановит перезагрузку