时间戳

首页 > 解决方案 > 在 React 中对输入框的值进行平方

reactjs - 在 React 中对输入框的值进行平方

问题描述

我是学习 React 和每天做一个小测试项目的新手。今天，我正在尝试创建一个输入框，当我单击提交按钮时，它会提醒数字的平方。很好很简单。但是，我试图在不使用 State的情况下做到这一点。只是想了解如何。这是我的代码，但缺少一些东西。我想我很接近了！

有任何想法吗？

import { render } from '@testing-library/react';
import React from 'react';

class App extends React.Component {
  sayHi = props => {
    alert(this.props.mySentProps);
  };

  squareTheNumber = () => {
    alert('this is the squared number'+ );
  };

  render() {
    return (
      <div>
        <div onClick={this.sayHi}>
          <h1>Hello World</h1>
        </div>
        <div>
          <input type="text" placeholder={'Enter a number to square'} />
        </div>
        <div>
          <button onClick={this.squareTheNumber}>Submit me</button>
        </div>
      </div>
    );
  }
}

export default App;

标签： reactjs

解决方案

如前所述，没有状态或任何扩展就没有干净的方法。最好的方法是使用状态并使事情变得干净。但另一种方法是使用 JQuery。

例如：

您可以分配<input>一个 id，比如 myId。然后你这样做：

var content = $('#myId').content;

然后您可以p通过为其分配一个新值来更改其中的内容。

但是使用 JQuery 种类会破坏 React 的目的，所以我建议使用 state。

推荐阅读