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

【问题标题】：How to make ReactJS onClick function change the value of a textarea?如何使 ReactJS onClick 函数更改文本区域的值？
【发布时间】：2020-01-22 13:36:21
【问题描述】：

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

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>

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

【问题讨论】：

哪个区域是用来换文字的？我的意思是你的代码中的地址在哪里
当我按“运行代码 sn-p”时，示例不起作用。

标签： javascript jquery html reactjs jsx

【解决方案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" });
    }

这将停止重新加载

【讨论】：

【解决方案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>

"""

自从

希望对你有帮助

【讨论】：

【解决方案3】：

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

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

【讨论】：