代码之家 › 专栏 › 技术社区 › hamza henni

如何使用onClick事件从状态访问内部变量

react-props frontend oop reactjs javascript

-1

hamza henni · 技术社区 · 2 年前

我有一个反应应用程序当我按下按钮不显示结果:测试

对于null,可以,但我不能'显示getNewResult函数的结果!!

import React from 'react';


function ResultDisplayer({ getNewResult }){
    let result = null;
    
    function handleClick(){
        result = getNewResult();
    }
    
    return (<div>
        <button id="button" onClick={handleClick}>Click</button>
        {result != null && <span id="result">{result}</span>}
    </div>);
}

export function Preview() {
    return <ResultDisplayer getNewResult={() => 'test'} />;
}

export default ResultDisplayer;

1 回复 | 直到 2 年前

Danziger 2 年前

你需要使用 state ( useState() )以便在状态更改时重新渲染组件:

function ResultDisplayer({ getNewResult }){
    let [result, setResult] = React.useState(null);
    
    function handleClick(){
        setResult(getNewResult());
    }
    
    return (
      <div>
        <button id="button" onClick={ handleClick }>Click</button>
        
        { result != null && <div id="result">{ result }</div> }
      </div>
    );
}

const App = () => {
  return <ResultDisplayer getNewResult={() => 'test'} />;
}

ReactDOM.render(<App />, document.querySelector('#app'));

body {
  font-family: monospace;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

button {
  font-family: monospace;
  font-weight: bold;
  border-radius: 4px;
  padding: 8px 16px;
  box-shadow: inset 0 0 0 2px black;
  background: transparent;
  overflow: hidden;
  transition: all ease-in 300ms;
  outline: none;
  border: 0;
  cursor: pointer;
  display: block;
}

#result {
  margin-top: 16px;
  padding: 8px 16px;
  text-align: center;
}

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

推荐文章

Reyad Islam · PHP致命错误:未捕获PDOException:SQLSTATE[00804][1040]连接太多[重复]

1 年前

JunYoung Yoon · 在接口中声明抽象函数和以非抽象形式声明函数有什么区别?

2 年前

Schadre · C-plus编码错误

2 年前

TryingToLearn · 我如何为通用遥控器构造一个类,该遥控器向连接到它的各种设备发送开/关命令?

2 年前

Nithin K · 即使类属性的类型正确,也会获取异常

2 年前

David Shnayder · 如何只允许使用Action<Class>方法修改类属性?

2 年前

Involute · 解决明显的循环依赖关系:类A有一个接受类B的方法,而类B有一个类型为类A[重复]的成员

2 年前

amirreza870 · Python OOP-更改类文本

3 年前

A_K · 使用cat或打印方法打印部分内容的子集闭包

3 年前

Mo Fatah · 如何使用Python类打印数独板?

3 年前