Question

嗨，我是React和js的新手。

我试图编写两个文本框，以便用户插入两个数字，然后单击“添加”按钮，他将得到结果。

我的建议是：

import React, { Component } from 'react';

export class Home extends Component {
displayName = Home.name

  render() {
    return (
        <div>
        <h1>Hello world! This is a new Web App</h1>

            <input type="text" name="" id="txt1" />
            +
            <input type="text" name="" id="txt1" />
            = <br/>
            <button onClick="add()">Add</button>

        </div>
      );
     }
    }

我想和一个函数add（）将执行以下操作：

function add()
{
 var a = getElementById("txt1").value;
 var b = getElementById("txt2").value;
 alert(pardeInt(a)+parseInt(b));
}

如果有人可以编辑我建议的代码以便它能正常工作，那就太好了。

谢谢。

Answer 1

首先，您需要根据自己的情况bind使用该功能。这可以通过

this.myFunction.bind()

或通过箭头功能（为您绑定功能）

然后您必须更新状态（状态更改时将再次执行渲染）：

import React, { Component } from 'react';

export class Home extends Component {
  state = { 
    result: 0,
    val1: 0,
    val2: 0,
  }

  handleChangeOne = (event) => {
    this.setState({val1: event.target.value});
  }
  
  handleChangeTwo = (event) => {
    this.setState({val2: event.target.value});
  }

  add = () =>
  {
   this.setState({
      result: parseInt(this.state.val1)+parseInt(this.state.val2)
      });
  }

  render() {
    return (
        <div>
        <h1>Hello world! This is the result: {this.state.result}</h1>

            <input onChange={this.handleChangeOne} type="text" />
            +
            <input type="text" onChange={this.handleChangeTwo} />
            = <br/>
            <button onClick={this.add}>Add</button>

        </div>
      );
     }
    }

请避免直接访问DOM并依赖本地状态。

Answer 2

您的代码只是在告诉您您没有React.js和React Native适当的知识。

如果您要构建移动应用程序，肯定要先看一下React.js的基础，然后再看一下React-Native文档：

React.js文档：https://reactjs.org/docs/getting-started.html
反应本机文档：https://facebook.github.io/react-native/docs/getting-started.html

在React js中编写一个函数

2 个答案: